Tutorial: Erstellen einer Node.js- und React-App in Visual Studio

Mit Visual Studio können Sie problemlos ein Node.js-Projekt erstellen sowie IntelliSense und andere vorgefertigte Features nutzen, die Node.js unterstützen. In diesem Tutorial erstellen Sie ein Web-App-Projekt in Node.js aus einer Visual Studio-Vorlage. Anschließend erstellen Sie mithilfe von React eine einfache App.

In diesem Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:

• Erstellen eines Node.js-Projekts
• Hinzufügen von NPM-Paketen
• Hinzufügen von React-Code zur App
• Transpilieren von JSX
• Fügen Sie den Debugger an.

Wichtig

Ab Visual Studio 2022 können Sie alternativ auch ein React-Projekt erstellen, indem Sie den empfohlenen CLI-basierten Projekttyp verwenden. Einige der Informationen in diesem Artikel gelten nur für den Node.js-Projekttyp (.njsproj). Die in diesem Artikel verwendete Vorlage ist in Visual Studio 2022 ab Version 17.8 Preview 2 nicht mehr verfügbar.

Sehen Sie sich zunächst die folgenden häufig gestellten Fragen an, in denen einige wichtige Konzepte vorgestellt werden:

• Was ist Node.js?

  Node.js ist eine serverseitige JavaScript-Laufzeitumgebung, die JavaScript-Code ausführt.

• Was ist NPM?

  npm ist der Standardpaket-Manager für Node.js. Ein Paket-Manager erleichtert das Veröffentlichen und Freigeben von Node.js-Quellcodebibliotheken. Der npm-Paket-Manager vereinfacht die Installation, Aktualisierung und Deinstallation von Bibliotheken.

• Was ist React?

  React ist ein Front-End-Framework zum Erstellen einer Benutzeroberfläche.

• Was ist JSX?

  JSX ist eine JavaScript-Syntaxerweiterung, die in der Regel mit React zum Beschreiben der Benutzeroberflächenelemente verwendet wird. JSX-Code muss in einfaches JavaScript transpiliert werden, damit er in einem Browser ausgeführt werden kann.

• Was ist Webpack?

  Webpack bündelt JavaScript-Dateien für die Ausführung in einem Browser und kann auch andere Ressourcen transformieren oder paketieren. Mit Webpack kann ein Compiler angegeben werden, z. B. Babel oder TypeScript, um JSX- oder TypeScript-Code in einfaches JavaScript zu transpilieren.

Voraussetzungen

Für dieses Tutorial gelten die folgenden Voraussetzungen:

• Installation von Visual Studio mit der Node.js-Entwicklungsworkload

  Wenn Visual Studio noch nicht installiert ist:

  1. Wechseln Sie zur Seite Visual Studio-Downloads, um Visual Studio kostenlos zu installieren.

  2. Wählen Sie im Visual Studio-Installer die Workload Node.js-Entwicklung aus, und klicken Sie auf Installieren.

     

  Wenn Sie Visual Studio installiert haben, aber noch die Node.js-Workload benötigen:

  1. Navigieren Sie in Visual Studio zu Tools>Tools und Features abrufen.

  2. Wählen Sie im Visual Studio-Installer die Workload Node.js-Entwicklung und dann Ändern aus, um die Workload herunterzuladen und zu installieren.

• Installation der Node.js-Runtime

  Wenn die Node.js-Runtime nicht installiert ist, installieren Sie die LTS-Version über die Node.js-Website. Die LTS-Version bietet die beste Kompatibilität mit anderen Frameworks und Bibliotheken.

  Die Node.js-Tools in der Visual Studio-Node.js-Workload unterstützen sowohl die 32-Bit- als auch 64-Bit-Architekturversion von Node.js. Für Visual Studio ist nur eine Version erforderlich, und der Node.js-Installer unterstützt jeweils nur eine Version.

  In der Regel erkennt Visual Studio die installierte Node.js-Runtime automatisch. Andernfalls können Sie Ihr Projekt so konfigurieren, dass es auf die installierte Runtime verweist:

  1. Klicken Sie nach dem Erstellen eines Projekts mit der rechten Maustaste auf den Projektknoten, und wählen Sie Eigenschaften aus.

  2. Legen Sie im Bereich Eigenschaften den Node.exe-Pfad so fest, dass er auf eine globale oder lokale Installation von Node.js verweist. Sie können in jedem Ihrer Node.js-Projekte den Pfad zu einem lokalen Interpreter angeben.

Dieses Tutorial wurde mit Node.js 18.5.0 getestet.

Erstellen eines Projekts

Erstellen Sie zunächst ein Node.js-Web-App-Projekt.

1. Öffnen Sie Visual Studio, und drücken Sie ESC, um das Startfenster zu schließen.

2. Drücken Sie STRG+Q, geben Sie node.js in das Suchfeld ein, und wählen Sie dann in der Dropdownliste Leere Node.js-Webanwendung – JavaScript aus.

   Auch wenn dieses Tutorial den TypeScript-Compiler verwendet, ist es für die Schritte erforderlich, dass Sie mit der JavaScript-Vorlage beginnen.

   Wenn die Projektvorlage Leere Node.js-Webanwendung nicht angezeigt wird, müssen Sie die Workload für die Node.js-Entwicklung installieren. Anweisungen hierzu finden Sie unter Voraussetzungen.

3. Wählen Sie im Dialogfeld Neues Projekt konfigurieren die Option Erstellen aus.

   Visual Studio erstellt die neue Projektmappe und das neue Projekt. Das Projekt wird im rechten Bereich geöffnet. Die Projektdatei server.js wird im Editor im linken Bereich geöffnet.

4. Sehen Sie sich die Projektstruktur im rechten Bereich des Projektmappen-Explorers an.

   

   • Auf der obersten Ebene befindet sich die Projektmappe (1), die standardmäßig denselben Namen wie Ihr Projekt aufweist. Eine Projektmappe, die auf dem Datenträger durch eine SLN-Datei dargestellt wird, ist ein Container für mindestens ein zugehöriges Projekt.

   • Ihr Projekt (2) verwendet den Namen, den Sie im Dialogfeld Neues Projekt konfigurieren angegeben haben, und ist fett hervorgehoben. Im Dateisystem entspricht das Projekt einer NJSPROJ-Datei im Projektordner.

     Um Projekteigenschaften und Umgebungsvariablen anzuzeigen und festzulegen, drücken Sie ALT+EINGABETASTE, oder klicken Sie mit der rechten Maustaste auf das Projekt, und wählen Sie im Kontextmenü Eigenschaften aus. Die Arbeit mit anderen Entwicklungstools ist möglich, weil die Projektdatei keine benutzerdefinierten Änderungen an der Node.js-Projektquelle vornimmt.

   • Der Knoten npm (3) zeigt installierte npm-Pakete an.

     Klicken Sie mit der rechten Maustaste auf den Knoten npm, um npm-Pakete zu suchen und zu installieren. Sie können Pakete über die Einstellungen in package.json und die Kontextmenüoptionen für den Knoten npm installieren und aktualisieren.

   • npm verwendet die Datei package.json (4) zum Verwalten von Abhängigkeiten und Versionen für lokal installierte Pakete. Weitere Informationen finden Sie unter Verwalten von npm-Paketen.

   • Projektdateien (5) werden unter dem Projektknoten angezeigt. Die Projektstartdatei server.js wird fett dargestellt.

     Sie können die Startdatei festlegen, indem Sie mit der rechten Maustaste auf eine Datei im Projekt klicken und Als Node.js-Startdatei festlegen auswählen.

Hinzufügen von NPM-Paketen

Diese App erfordert die folgenden npm-Module, damit sie ordnungsgemäß ausgeführt wird:

• react
• react-dom
• express
• path
• ts-loader
• typescript
• webpack
• webpack-cli

So installieren Sie ein Paket

1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Knoten npm, und wählen Sie Neue npm-Pakete installieren aus.

2. Suchen Sie im Dialogfeld Neue npm-Pakete installieren das React-Paket, und klicken Sie auf Paket installieren, um es zu installieren.

   

   Im Dialogfeld Neue npm-Pakete installieren können Sie entweder die neueste Paketversion installieren oder eine bestimmte Version angeben. Wenn Sie sich für die Installation der neuesten Version entscheiden, aber später unerwartete Fehler auftreten, installieren Sie die genauen Paketversionen, die im nächsten Schritt aufgeführt sind.

   Im Fenster Ausgabe im unteren Bereich von Visual Studio wird der Fortschritt der Paketinstallation angezeigt. Öffnen Sie das Fenster Ausgabe, indem Sie Ansicht>Ausgabe auswählen oder STRG+ALT+O drücken. Wählen Sie im Fenster Ausgabe im Feld Ausgabe anzeigen von die Option npm aus.

   Wenn es installiert ist, wird das React-Paket im Projektmappen-Explorer unter dem Knoten npm angezeigt.

   Die Datei package.json des Projekts wird mit den neuen Paketinformationen einschließlich der Paketversion aktualisiert.

Statt die Benutzeroberfläche zum Suchen und Hinzufügen der einzelnen übrigen Pakete zu verwenden, können Sie den erforderlichen Paketcode in package.json einfügen.

1. Öffnen Sie im Projektmappen-Explorer die Datei package.json im Visual Studio-Editor. Fügen Sie den folgenden Abschnitt dependencies am Ende der Datei hinzu:

   "dependencies": {
     "express": "^4.18.2",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.2",
     "webpack": "^5.76.3",
     "webpack-cli": "^5.0.1"
   },
   

   Wenn die Datei bereits über einen Abschnitt dependencies verfügt, ersetzen Sie ihn durch den vorstehenden JSON-Code. Weitere Informationen zur Verwendung der Datei package.json finden Sie unter package.json-Konfiguration.

2. Drücken Sie STRG+S, oder wählen Sie Datei>„package.json“ speichern aus, um die Änderungen zu speichern.

3. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Knoten npm in Ihrem Projekt, und wählen Sie npm-Pakete installieren aus.

   Hiermit wird der Befehl „npm install“ direkt ausgeführt, um alle in packages.json aufgeführten Pakete zu installieren.

   Wählen Sie im unteren Bereich das Fenster Ausgabe aus, um den Installationsfortschritt anzuzeigen. Die Installation kann einige Minuten dauern, und die Ergebnisse werden Ihnen möglicherweise nicht sofort angezeigt. Achten Sie darauf, dass Sie im Fenster Ausgabe im Feld Ausgabe anzeigen von die Option npm ausgewählt haben.

   Nach der Installation werden die npm-Module im Projektmappen-Explorer im Knoten npm angezeigt.

   

   Hinweis

   Sie können npm-Pakete auch über die Befehlszeile installieren. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen Sie Eingabeaufforderung hier öffnen aus. Verwenden Sie die Node.js-Standardbefehle, um die Pakete zu installieren.

Hinzufügen von Projektdateien

Fügen Sie Ihrem Projekt als Nächstes vier neue Dateien hinzu.

• app.tsx
• webpack-config.js
• index.html
• tsconfig.json

Fügen Sie für diese einfache App die neuen Projektdateien dem Projektstammverzeichnis hinzu. In den meisten Apps werden die Dateien Unterordnern hinzugefügt und die relativen Pfadverweise entsprechend angepasst.

1. Wählen Sie im Projektmappen-Explorer den Projektnamen aus, und drücken Sie STRG+UMSCHALT+A, oder klicken Sie mit der rechten Maustaste auf den Projektnamen, und wählen Sie Hinzufügen>Neues Element aus.

   Wenn nicht alle Elementvorlagen angezeigt werden, wählen Sie Alle Vorlagen anzeigen und dann die Elementvorlage aus.

2. Wählen Sie im Dialogfeld Neues Element hinzufügen die Option TypeScript-JSX-Datei aus, geben Sie den Namen app.tsx ein, und klicken Sie dann auf Hinzufügen bzw. OK.

3. Wiederholen Sie diese Schritte, um eine JavaScript-Datei namens webpack-config.js hinzuzufügen.

4. Wiederholen Sie diese Schritte, um eine HTML-Datei namens index.html hinzuzufügen.

5. Wiederholen Sie diese Schritte, um eine TypeScript-JSON-Konfigurationsdatei namens tsconfig.json hinzuzufügen.

Hinzufügen von App-Code

1. Öffnen Sie im Projektmappen-Explorer die Datei server.js, und ersetzen Sie den vorhandenen Code durch den folgenden:

   'use strict';
   var path = require('path');
   var express = require('express');
   
   var app = express();
   
   var staticPath = path.join(__dirname, '/');
   app.use(express.static(staticPath));
   
   // Allows you to set port in the project properties.
   app.set('port', process.env.PORT || 3000);
   
   var server = app.listen(app.get('port'), function() {
       console.log('listening');
   });
   

   Der vorherige Code verwendet Express, um Node.js als Webanwendungsserver zu starten. Der Code legt den Port auf die Portnummer fest, die in den Projekteigenschaften konfiguriert ist (standardmäßig 1337). Wenn Sie die Projekteigenschaften öffnen möchten, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen Sie Eigenschaften aus.

2. Öffnen Sie app.tsx, und fügen Sie den folgenden Code hinzu:

   declare var require: any
   
   var React = require('react');
   var ReactDOM = require('react-dom');
   
   export class Hello extends React.Component {
       render() {
           return (
               <h1>Welcome to React!!</h1>
           );
       }
   }
   
   ReactDOM.render(<Hello />, document.getElementById('root'));
   

   Der vorstehende Code verwendet JSX-Syntax und React zum Anzeigen einer Nachricht.

3. Öffnen Sie index.html, und ersetzen Sie den Abschnitt body durch den folgenden Code:

   <body>
       <div id="root"></div>
       <!-- scripts -->
       <script src="./dist/app-bundle.js"></script>
   </body>
   

   Diese HTML-Seite lädt die Datei app-bundle.js, die den in einfaches JavaScript transpilierten JSX- und React-Code enthält. app-bundle.js ist momentan eine leere Datei. Im nächsten Abschnitt konfigurieren Sie Optionen, um den Code zu transpilieren.

Konfigurieren von Webpack- und TypeScript-Compileroptionen

Als Nächstes fügen Sie webpack-config.js Webpack-Konfigurationscode hinzu. Zum Bündeln und Transpilieren von JSX in einfaches JavaScript fügen Sie eine einfache Webpack-Konfiguration hinzu, die eine Eingabedatei (app.tsx) und eine Ausgabedatei (app-bundle.js) angibt. Für die Transpilierung konfigurieren Sie auch mehrere TypeScript-Compileroptionen. Dieser Basiskonfigurationscode dient als Einführung in Webpack und den TypeScript-Compiler.

1. Öffnen Sie im Projektmappen-Explorer die Datei webpack-config.js, und fügen Sie den folgenden Code hinzu.

   module.exports = {
       devtool: 'source-map',
       entry: "./app.tsx",
       mode: "development",
       output: {
           filename: "./app-bundle.js"
       },
       resolve: {
           extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
       },
       module: {
           rules: [
               {
                   test: /\.tsx$/,
                   exclude: /(node_modules|bower_components)/,
                   use: {
                       loader: 'ts-loader'
                   }
               }
           ]
       }
   }
   

   Durch den Webpack-Konfigurationscode verwendet Webpack das TypeScript-Ladeprogramm, um JSX zu transpilieren.

2. Öffnen Sie tsconfig.json, und ersetzen Sie den Inhalt durch den folgenden Code, der die TypeScript-Compileroptionen angibt:

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "module": "commonjs",
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "jsx": "react"
     },
     "exclude": [
       "node_modules"
     ],
     "files": [
       "app.tsx"
     ]
   }
   

   Der Code gibt app.tsx als Quelldatei an.

3. Drücken Sie STRG+UMSCHALT+S, oder klicken Sie auf Datei>Alle speichern, um alle Änderungen zu speichern.

Transpilieren von JSX

1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen Sie Eingabeaufforderung hier öffnen aus.

2. Geben Sie an der Eingabeaufforderung den folgenden Webpack-Befehl ein:

   node_modules\.bin\webpack --config webpack-config.js

   Das Ergebnis wird im Fenster „Eingabeaufforderung“ angezeigt.

   

   Werden anstatt der vorherigen Ausgabe Fehler angezeigt, müssen Sie diese beheben, damit Ihre App funktioniert. Wenn sich Ihre npm-Paketversionen von den in diesem Tutorial angegebenen Versionen unterscheiden, kann dies zu Fehlern führen. Um die Fehler zu beheben, versuchen Sie Folgendes:

   • Verwenden Sie die genau gleichen Versionen, die im vorherigen Schritt angezeigt werden, wenn Sie das noch nicht getan haben.

     Wenn der Fehler weiterhin angezeigt wird, versuchen Sie Folgendes:

   • Installieren Sie die neuesten Versionen der npm-Pakete, indem Sie im Projektmappen-Explorer mit der rechten Maustaste auf den npm-Knoten klicken und npm-Pakete installieren auswählen.

   Wenn eine oder mehrere Paketversionen veraltet sind und zu einem Fehler führen, müssen Sie zum Beheben der Fehler möglicherweise eine neuere Version installieren. Informationen zur Verwendung von package.json zum Steuern von npm-Paketversionen finden Sie unter package.json-Konfiguration.

3. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektknoten, und wählen Sie Hinzufügen>Vorhandener Ordner aus.

4. Wählen Sie den Ordner dist und dann Ordner auswählen aus.

   Visual Studio fügt dem Projekt den Ordner dist hinzu, der die Dateien app-bundle.js und app-bundle.js.map enthält.

5. Öffnen Sie zum Anzeigen des transpilierten JavaScript-Codes die Datei app-bundle.js.

6. Wenn Sie angeben müssen, ob extern geänderte Dateien erneut geladen werden sollen, klicken Sie auf Ja, alle.

   

Bei jeder Änderung, die Sie an app.tsx vornehmen, müssen Sie den Webpack-Befehl erneut ausführen. Um diesen Schritt zu automatisieren, können Sie ein Buildskript zum Transpilieren von JSX hinzufügen.

Hinzufügen eines Buildskripts zum Transpilieren von JSX

Für Visual Studio-Versionen ab Visual Studio 2019 ist ein Buildskript erforderlich. Anstatt JSX (wie im vorherigen Abschnitt gezeigt) über die Befehlszeile zu transpilieren, können Sie JSX bei der Erstellung über Visual Studio transpilieren.

1. Öffnen Sie package.json, und fügen Sie nach Abschnitt dependencies den folgenden Abschnitt ein:

   "scripts": {
    "build": "webpack-cli --config webpack-config.js"
   }
   

2. Speichern Sie die Änderungen.

Ausführen der App

1. Wählen Sie in der Symbolleiste Debuggen entweder Webserver (Microsoft Edge) oder Webserver (Google Chrome) als Debugziel aus.

   

   Wenn Sie wissen, dass Ihr bevorzugtes Debugziel auf Ihrem Computer verfügbar ist, dieses aber nicht als Option angezeigt wird, wählen Sie Durchsuchen mit aus der Dropdownliste mit Debugzielen aus. Wählen Sie ihr Standardbrowserziel in der Liste aus, und klicken Sie auf Als Standard festlegen.

2. Zum Ausführen der App drücken Sie F5, klicken auf die Schaltfläche mit dem grünen Pfeil oder wählen Debuggen>Debuggen starten aus.

   Ein Node.js-Konsolenfenster wird geöffnet, in dem der Port angezeigt wird, auf den der Debugger lauscht.

   Visual Studio startet die Anwendung durch Öffnen der Startdatei server.js.

   

3. Schließen Sie die Browser- und Konsolenfenster.

Festlegen eines Haltepunkts und Ausführen der App

Haltepunkte sind eine einfache und wichtige Funktion zum zuverlässigen Debuggen. Ein Haltepunkt gibt an, wo Visual Studio den ausgeführten Code anhalten soll. Anschließend können Sie Variablenwerte, das Speicherverhalten oder die Ausführung eines Codebranchs beobachten.

1. Klicken Sie in server.js auf den Bundsteg links neben der staticPath-Deklaration, um einen Haltepunkt festzulegen:

   

2. Um die App auszuführen, drücken Sie F5, oder wählen Sie Debuggen>Debuggen starten aus.

   Der Debugger hält an dem von Ihnen festgelegten Haltepunkt an. Die aktuelle Anweisung ist hervorgehoben. Jetzt können Sie den App-Status überprüfen, indem Sie auf die derzeitigen Variablen im Bereich zeigen. Verwenden Sie dafür Debuggerfenster wie Lokal und Überwachen.

3. Um die Ausführung der App fortzusetzen, drücken Sie F5, klicken Sie auf der Symbolleiste Debuggen auf Fortsetzen, oder wählen Sie Debuggen>Fortsetzen aus.

   Wenn Sie die Chrome-Entwicklertools oder F12-Tools für Microsoft Edge verwenden möchten, drücken Sie F12. Mit diesen Tools können Sie das DOM untersuchen und mithilfe der JavaScript-Konsole mit der App interagieren.

4. Schließen Sie die Browser- und Konsolenfenster.

Festlegen und Erreichen eines Haltepunkts im clientseitigen React-Code

Im vorherigen Abschnitt haben Sie den Debugger an den serverseitigen Node.js-Code angehängt. Zum Anfügen an und Erreichen von Haltepunkten im clientseitigen React-Code müssen Sie den Debugger an den richtigen Prozess anfügen. Hier wird eine Möglichkeit zum Aktivieren eines Browsers und zum Anfügen eines Prozesses für das Debuggen aufgeführt.

Aktivieren des Debuggens im Browser

Sie können entweder Microsoft Edge oder Google Chrome verwenden. Schließen Sie alle Fenster des Zielbrowsers. Beenden Sie auch alle Instanzen von Chrome, wenn Sie Microsoft Edge verwenden. Da beide Browser die Chromium-Codebasis nutzen, erzielen Sie durch das Herunterfahren beider Browser die besten Ergebnisse.

Andere Browserinstanzen können das Öffnen des Browsers bei aktiviertem Debuggen verhindern. Browsererweiterungen können den vollständigen Debugmodus verhindern. Möglicherweise müssen Sie den Task-Manager verwenden, um alle ausgeführten Chrome-Instanzen zu finden und zu beenden.

So starten Sie Ihren Browser mit aktiviertem Debuggen

1. Wählen Sie in der Dropdownliste auf der Symbolleiste Debuggen die Option Durchsuchen mit aus.

2. Wählen Sie im Bildschirm Durchsuchen mit Ihren bevorzugten Browser aus, und klicken Sie auf Hinzufügen.

3. Geben Sie das Flag --remote-debugging-port=9222 in das Feld Argumente ein.

4. Geben Sie dem Browser einen neuen Anzeigenamen, z. B. Microsoft Edge mit Debuggen oder Chrome mit Debuggen, und klicken Sie dann auf OK.

5. Klicken Sie im Bildschirm Durchsuchen mit auf Durchsuchen.

   

• Alternativ können Sie den Befehl Ausführen öffnen, indem Sie mit der rechten Maustaste auf die Windows Start-Schaltfläche klicken und Folgendes eingeben:

  msedge --remote-debugging-port=9222

  oder

  chrome.exe --remote-debugging-port=9222

Der Browser wird mit aktiviertem Debuggen gestartet. Die App wird noch nicht ausgeführt, sodass die Browserseite leer ist.

Anfügen des Debuggers an clientseitiges Skript

1. Legen Sie im Visual Studio-Editor einen Haltepunkt im Quellcode von app-bundle.js oder app.tsx fest.

   • Legen Sie für app-bundle.js den Haltepunkt in der Funktion render() fest. Um die Funktion render() in der Datei app-bundle.js zu finden, drücken Sie STRG+F, oder wählen Sie Bearbeiten>Suchen und ersetzen>Schnellsuche aus, und geben Sie render in das Suchfeld ein.

     

   • Legen Sie den Breakpoint für app.tsx in der render()-Funktion in der return-Anweisung fest.

     

     Wenn Sie den Haltepunkt in app.tsx festlegen, aktualisieren Sie auch webpack-config.js, um den folgenden Code zu ersetzen, und speichern Sie Ihre Änderungen.

     Ersetzen Sie diesen Code:

     output: {
         filename: "./app-bundle.js",
     },
     

     Mit folgendem Code:

     output: {
         filename: "./app-bundle.js",
         devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
     },
     

     Diese nur für die Entwicklung bestimmte Einstellung ermöglicht das Debuggen in Visual Studio. Webpack-Verweise in der Quellzuordnungsdatei enthalten standardmäßig das Präfix webpack:///, das Visual Studio daran hindert, die Quelldatei app.tsx zu finden. Diese Einstellung setzt die generierten Verweise in der Quellzuordnungsdatei (app-bundle.js.map) beim Erstellen der App außer Kraft. Insbesondere ändert diese Einstellung den Verweis auf die Quelldatei von webpack:///./app.tsx in ./app.tsx, wodurch das Debuggen ermöglicht wird.

2. Wählen Sie Ihren Zielbrowser als Debugziel in Visual Studio aus, und drücken Sie dann STRG+F5, oder wählen Sie Debuggen>Ohne Debuggen starten aus, um die App im Browser auszuführen.

   Wenn Sie eine für das Debuggen aktivierte Browserkonfiguration mit einem Anzeigenamen erstellt haben, wählen Sie diesen Browser als Debugziel aus.

   Die App wird daraufhin in einer neuen Registerkarte im Browser geöffnet.

3. Wählen Sie Debuggen>An Prozess anfügen aus, oder drücken Sie STRG+ALT+P.

   Tipp

   Sobald Sie das Anfügen an den Prozess erstmals durchgeführt haben, können Sie schnell erneut an denselben Prozess anfügen, indem Sie Debuggen>Erneut an Prozess anfügen auswählen oder UMSCHALT+ALT+P drücken.

4. Im Dialogfeld An Prozess anhängen finden Sie eine gefilterte Liste der Browserinstanzen, an die Sie anfügen können.

   Stellen Sie sicher, dass im Feld Anfügen an der richtige Debugger für Ihren Zielbrowser angezeigt wird, JavaScript (Chrome) oder JavaScript (Microsoft Edge – Chromium) . Geben Sie chrome oder edge in das Filterfeld ein, um die Ergebnisse zu filtern.

5. Wählen Sie den Browserprozess mit dem richtigen Hostport aus, in diesem Beispiel localhost. Port 1337 oder localhost kann auch im Feld Titel angezeigt werden, um Ihnen die Auswahl des richtigen Prozesses zu vereinfachen.

6. Wählen Sie Anfügen aus.

   Das folgende Beispiel zeigt das Fenster An Prozess anhängen für den Microsoft Edge-Browser.

   

   Tipp

   Wenn der Debugger nicht angefügt wird und die Meldung Das Anfügen an den Prozess ist nicht möglich. Ein Vorgang ist für den derzeitigen Zustand unzulässig angezeigt wird, schließen Sie alle Instanzen des Zielbrowsers über den Task-Manager, bevor Sie den Browser im Debugmodus starten. Möglicherweise werden Browsererweiterungen ausgeführt, die den vollständigen Debugmodus verhindern.

7. Da der Code mit dem Haltepunkt bereits ausgeführt wurde, aktualisieren Sie zum Erreichen des Haltepunkts die Browserseite.

   Abhängig von Ihrer Umgebung, dem Browserzustand und den zuvor ausgeführten Schritten erreichen Sie möglicherweise den Haltepunkt in app-bundle.js oder an der zugeordneten Position in app.tsx. In beiden Fällen können Sie durch den Code navigieren und Variablen überprüfen.

   Solange der Debugger angehalten ist, können Sie den App-Zustand überprüfen, indem Sie mit dem Mauszeiger auf Variablen zeigen und Debuggerfenster verwenden. Um den Code schrittweise zu durchlaufen, drücken Sie F11, oder wählen Sie Debuggen>Schrittweise ausführen aus, bzw. drücken Sie F10, oder wählen Sie Debuggen>Prozedurschritt aus. Um die Ausführung des Codes fortzusetzen, drücken Sie F5, oder wählen Sie Fortsetzen aus. Weitere Informationen zu grundlegenden Debugfeatures finden Sie unter Erster Einblick in den Debugger.

   • Wenn Sie den Code in app.tsx nicht unterbrechen können, verwenden Sie An Prozess anhängen, wie in den vorherigen Schritten beschrieben, um den Debugger anzuhängen. Stellen Sie sicher, dass Ihre Umgebung ordnungsgemäß eingerichtet ist:

     • Schließen Sie alle Browserinstanzen, einschließlich der Chrome-Erweiterungen, über den Task-Manager. Stellen Sie sicher, dass Sie den Browser im Debugmodus starten.

     • Stellen Sie sicher, dass Ihre Quellzuordnungsdatei einen Verweis auf ./app.tsx und nicht auf webpack:///./app.tsx enthält, da der Visual Studio-Debugger app.tsx ansonsten nicht findet.

     Sie können alternativ versuchen, die debugger;-Anweisung in app.tsx zu verwenden oder Haltepunkte in den Chrome-Entwicklertools oder in den F12-Tools für Microsoft Edge festzulegen.

   • Wenn Sie den Code in app-bundle.js nicht unterbrechen können, entfernen Sie die Quellzuordnungsdatei app-bundle.js.map.

Nächste Schritte

Deploy the app to Linux App Service (Bereitstellen der App für Linux App Service)