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

Artikel
02/03/2025

Mit Visual Studio können Sie ganz einfach ein Node.js Projekt erstellen und IntelliSense und andere integrierte Features verwenden, die Node.jsunterstützen. In diesem Lernprogramm erstellen Sie ein Node.js Web App-Projekt aus einer Visual Studio-Vorlage. Anschließend erstellen Sie eine einfache App mit React.

In diesem Lernprogramm erfahren Sie, wie Sie:

Erstellen Sie ein Node.js-Projekt
Hinzufügen von npm-Paketen
Hinzufügen von React-Code zu Ihrer App
Transpilieren von JSX
Anfügen des Debuggers

Wichtig

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

Bevor Sie beginnen, finden Sie hier eine kurze Faq, um Ihnen einige wichtige Konzepte vorzustellen:

Was ist Node.js?

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

Der Standardpaket-Manager für Node.js ist npm. Ein Paket-Manager erleichtert das Veröffentlichen und Freigeben Node.js Quellcodebibliotheken. Der npm-Paket-Manager vereinfacht die Installation, Aktualisierung und Deinstallation der Bibliothek.
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 verwendet wird, um UI-Elemente zu beschreiben. Sie müssen JSX-Code in einfaches JavaScript transpilieren, bevor er in einem Browser ausgeführt werden kann.
Was ist webpack?

Webpack bündelt JavaScript-Dateien, damit sie in einem Browser ausgeführt werden können, und kann auch andere Ressourcen und Ressourcen transformieren oder verpacken. Webpack kann einen Compiler angeben, z. B. Babel oder TypeScript, um JSX- oder TypeScript-Code in einfaches JavaScript zu transpilieren.

Voraussetzungen

Dieses Lernprogramm erfordert die folgenden Voraussetzungen:

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

Wenn Sie Visual Studio noch nicht installiert haben:
1. Wechseln Sie zur Visual Studio downloads Seite, 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 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 verfügt über die beste Kompatibilität mit anderen Frameworks und Bibliotheken.

Die Node.js Tools in Visual Studio Node.js Workload unterstützen sowohl Node.js 32-Bit- als auch 64-Bit-Architekturversionen. Visual Studio erfordert nur eine Version, und das Node.js Installer unterstützt jeweils nur eine Version.

Visual Studio erkennt in der Regel automatisch die installierte Node.js Laufzeit. Wenn nicht, können Sie Ihr Projekt so konfigurieren, dass auf die installierte Laufzeit verwiesen wird:
1. Nachdem Sie ein Projekt erstellt haben, klicken Sie mit der rechten Maustaste auf den Projektknoten, und wählen Sie Eigenschaftenaus.
2. Legen Sie im Bereich Eigenschaften den Node.exe Pfad fest, um auf eine globale oder lokale Installation von Node.jszu verweisen. Sie können den Pfad zu einem lokalen Dolmetscher in jedem Ihrer Node.js Projekte angeben.

Dieses Lernprogramm wurde mit Node.js 12.6.2 getestet.

Erstellen eines Projekts

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

Öffnen Sie Visual Studio.
Erstellen Sie ein neues Projekt.

Drücken Sie ESC-, um das Startfenster zu schließen. Geben Sie STRG+Q ein, um das Suchfeld zu öffnen, geben Sie Node.js ein, und wählen Sie dann Leere Node.js-Webanwendung – JavaScript aus. (Obwohl in diesem Lernprogramm der TypeScript-Compiler verwendet wird, müssen Sie mit der vorlage JavaScript beginnen.)

Wählen Sie im angezeigten Dialogfeld Erstellen aus.

Wenn die Projektvorlage Leere Node.js-Webanwendung nicht angezeigt wird, müssen Sie die Workload für die Node.js-Entwicklung hinzufügen. Ausführliche Anweisungen dazu finden Sie in den Voraussetzungen.

Visual Studio erstellt die neue Lösung und öffnet Ihr Projekt.

(1) Der fett hervorgehobene Name ist Ihr Projekt, dem Sie den Namen im Dialogfeld Neues Projekt gegeben haben. Im Dateisystem wird dieses Projekt durch eine .njsproj Datei in Ihrem Projektordner dargestellt. Sie können Eigenschaften und Umgebungsvariablen festlegen, die dem Projekt zugeordnet sind, indem Sie mit der rechten Maustaste auf das Projekt klicken und Eigenschaften auswählen (oder ALT + EINGABETASTEdrücken). Sie können Roundtrips mit anderen Entwicklungstools durchführen, da die Projektdatei keine benutzerdefinierten Änderungen an der Node.js Projektquelle vornimmt.

(2) Auf oberster Ebene ist eine Lösung, die standardmäßig denselben Namen wie Ihr Projekt hat. Eine Lösung, dargestellt durch eine .sln Datei auf dem Datenträger, ist ein Container für ein oder mehrere verwandte Projekte.

(3) Der npm-Knoten zeigt alle installierten npm-Pakete an. Sie können mit der rechten Maustaste auf den npm-Knoten klicken, um mithilfe eines Dialogfelds nach npm-Paketen zu suchen und zu installieren oder Pakete mithilfe der Einstellungen in package.json zu installieren und zu aktualisieren. Klicken Sie im npm-Knoten mit der rechten Maustaste auf Optionen.

(4) package.json ist eine Datei, die von npm zum Verwalten von Paketabhängigkeiten und Paketversionen für lokal installierte Pakete verwendet wird. Weitere Informationen finden Sie unter Verwalten von npm-Paketen.

(5) Projektdateien wie server.js werden unter dem Projektknoten angezeigt. server.js ist die Projektstartdatei und deshalb wird sie in fettangezeigt. Sie können die Startdatei festlegen, indem Sie mit der rechten Maustaste auf eine Datei im Projekt klicken und Als Node.js Startdatei festlegenauswählen.

Hinzufügen von npm-Paketen

Für diese App müssen die folgenden npm-Module ordnungsgemäß ausgeführt werden:

reagieren
react-dom
express
Pfad
ts-loader
TypeScript
webpack
webpack-cli

So installieren Sie ein Paket:

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Knoten npm, und wählen Sie Neue npm-Pakete installieren aus.
Suchen Sie im Dialogfeld Installieren neuer npm-Pakete nach dem React-Paket, und wählen Sie Installieren des Pakets aus, um es zu installieren.

Im Dialogfeld Neue npm-Pakete installieren, können Sie die neueste Paketversion installieren oder eine Version angeben. Wenn Sie sich für die Installation der aktuellen Versionen entscheiden, aber später unerwartete Fehler auftreten, versuchen Sie, die genauen Paketversionen zu installieren, 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 package.json Datei des Projekts wird mit den neuen Paketinformationen aktualisiert, einschließlich der Paketversion.

Anstatt die Benutzeroberfläche zum Suchen und Hinzufügen der restlichen Pakete einzeln zu verwenden, können Sie den erforderlichen Paketcode in package.jsoneinfügen.

Öffnen Sie im Projektmappen-Explorer die Datei package.json im Visual Studio-Editor. Fügen Sie den folgenden dependencies Abschnitt vor dem 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 dependencies Abschnitt verfügt, ersetzen Sie sie durch den vorherigen JSON-Code. Weitere Informationen zur Verwendung der package.json-Datei finden Sie unter package.json-Konfiguration.
Drücken Sie STRG+S, oder wählen Sie Datei>„package.json“ speichern aus, um die Änderungen zu speichern.
Klicken Sie im Projektmappen-Explorermit der rechten Maustaste auf den npm-Knoten in Ihrem Projekt, und wählen Sie "npm-Pakete installieren"aus.

Dieser Befehl führt den npm-Installationsbefehl direkt aus, um alle in packages.jsonaufgefü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 möglicherweise werden keine Ergebnisse 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.

Anmerkung

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

Hinzufügen von Projektdateien

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

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

Für diese einfache App fügen Sie die neuen Projektdateien im Projektstamm hinzu. Für die meisten Apps fügen Sie die Dateien zu Unterordnern hinzu und passen relative Pfadverweise entsprechend an.

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 anzeigenaus, und wählen Sie dann die Elementvorlage aus.
Wählen Sie im Dialogfeld Neues Element hinzufügen die Option TypeScript JSX-Dateiaus, geben Sie den Namen app.tsxein und klicken Sie auf Hinzufügen oder OK.
Wiederholen Sie diese Schritte, um eine JavaScript-Datei namens webpack-config.jshinzuzufügen.
Wiederholen Sie diese Schritte, um eine HTML-Datei namens index.htmlhinzuzufügen.
Wiederholen Sie diese Schritte, um eine TypeScript JSON-Konfigurationsdatei namens tsconfig.jsonhinzuzufügen.

Hinzufügen von App-Code

Öffnen Sie im Projektmappen-Explorerserver.js, und ersetzen Sie den vorhandenen Code durch den folgenden Code:
```
'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');
});
```
Im vorherigen Code wird Express verwendet, um Node.js als Webanwendungsserver zu starten. Der Code legt den Port auf die Portnummer fest, die in den Projekteigenschaften konfiguriert ist, die standardmäßig 1337 ist. Wenn Sie die Projekteigenschaften öffnen müssen, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen und wählen Sie Eigenschaftenaus.

Ö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'));

Im vorherigen Code werden JSX-Syntax und React verwendet, um eine Meldung anzuzeigen.

Öffnen Sie index.html, und ersetzen Sie den Abschnitt body durch den folgenden Code:
```
<body>
    <div id="root"></div>
    
    <script src="./dist/app-bundle.js"></script>
</body>
```
Diese HTML-Seite lädt app-bundle.js, die den JSX- und React-Code enthält, der in einfaches JavaScript transpiliert ist. Derzeit ist app-bundle.js eine leere Datei. Im nächsten Abschnitt konfigurieren Sie Optionen zum Transpilieren des Codes.

Konfigurieren von Webpack- und TypeScript-Compileroptionen

Als Nächstes fügen Sie Webpack-Konfigurationscode zu webpack-config.jshinzu. Sie fügen eine einfache Webpack-Konfiguration hinzu, die eine Eingabedatei angibt, app.tsxund eine Ausgabedatei, app-bundle.js, zum Bündeln und Transpilieren von JSX in einfaches JavaScript. Für die Transpilierung konfigurieren Sie auch einige TypeScript-Compileroptionen. Dieser grundlegende Konfigurationscode ist eine Einführung in Webpack und den TypeScript-Compiler.

Öffnen Sie im Projektmappen-Explorerwebpack-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'
                }
            }
        ]
    }
}

Der Webpack-Konfigurationscode weist webpack an, das TypeScript-Ladeprogramm zum Transpilieren des JSX zu verwenden.

Ö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.

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

Transpilieren von JSX

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen Sie Eingabeaufforderung hier öffnen aus.
Geben Sie an der Eingabeaufforderung den folgenden Webpack-Befehl ein:

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

Das Eingabeaufforderungsfenster zeigt das Ergebnis an.

Wenn Fehler anstelle der vorherigen Ausgabe angezeigt werden, müssen Sie sie beheben, bevor Ihre App funktioniert. Wenn ihre npm-Paketversionen von den versionen abweichen, die in diesem Lernprogramm angegeben sind, kann dies zu Fehlern führen. Um die Fehler zu beheben, versuchen Sie Folgendes:
- Verwenden Sie die genauen Versionen, die im vorherigen Schritt angezeigt werden, wenn Sie dies noch nicht getan haben.
  
  Oder wenn weiterhin Fehler angezeigt werden:
- 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 installierenauswählen.
Wenn mindestens eine Paketversion veraltet ist und zu einem Fehler führt, müssen Sie möglicherweise eine neuere Version installieren, um Fehler zu beheben. Informationen zur Verwendung von package.json zum Steuern von npm-Paketversionen finden Sie unter package.json Konfiguration.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektknoten, und wählen Sie Hinzufügen>Vorhandener Ordner aus.
Wählen Sie den Ordner dist und dann Ordner auswählen aus.

Visual Studio fügt dem Projekt den Ordner dist hinzu, der app-bundle.js sowie app-bundle.js.mapenthält.
Öffnen Sie app-bundle.js, um den transpilierten JavaScript-Code anzuzeigen.
Wenn Sie angeben müssen, ob extern geänderte Dateien erneut geladen werden sollen, klicken Sie auf Ja, alle.

Wenn Sie Änderungen an app.tsxvornehmen, müssen Sie den Webpack-Befehl erneut ausführen. Um diesen Schritt zu automatisieren, können Sie ein Buildskript hinzufügen, um das JSX zu transpilieren.

Hinzufügen eines Buildskripts zum Transpilieren des JSX

Visual Studio-Versionen ab Visual Studio 2019 erfordern ein Buildskript. Anstatt JSX in der Befehlszeile zu transpilieren, wie im vorherigen Abschnitt gezeigt, können Sie JSX beim Erstellen aus Visual Studio transpilieren.

Öffnen Sie package.json, und fügen Sie den folgenden Abschnitt nach dem abschnitt dependencies hinzu:
```
"scripts": {
 "build": "webpack-cli --config webpack-config.js"
}
```
Speichern Sie Ihre Änderungen.

Ausführen der App

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, aber nicht als Option angezeigt wird, wählen Sie Durchsuchen mit aus der Dropdownliste für Debugziels aus. Wählen Sie Ihr Standardbrowserziel in der Liste aus, und wählen Sie dann Als Standard festlegen aus.
Um die App auszuführen, drücken Sie F5, wählen Sie die grüne Pfeilschaltfläche aus oder wählen Sie Debug>Start Debuggingaus.

Ein Node.js Konsolenfenster wird geöffnet, das den Debugger-Abhörport zeigt.

Visual Studio startet die App durch Starten der Startdatei server.js.
Schließen Sie die Browser- und Konsolenfenster.

Festlegen eines Haltepunkts und Ausführen der App

Haltepunkte sind ein einfaches und wichtiges Feature zum zuverlässigen Debuggen. Ein Haltepunkt gibt an, wo Visual Studio den ausgeführten Code anhalten soll. Anschließend können Sie variable Werte, Speicherverhalten oder ob eine Verzweigung des Codes ausgeführt wird, beobachten.

Klicken Sie in server.js auf den Bundsteg links neben der staticPath-Deklaration, um einen Haltepunkt festzulegen:
Um die App auszuführen, drücken Sie F5-, oder wählen Sie Debuggen aus,>Debuggenstarten.

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.
Um die App weiter auszuführen, drücken Sie F5, wählen Sie Weiter in der Symbolleiste Debuggen aus, oder wählen Sie Debug>Continueaus.

Wenn Sie die Chrome-Entwicklertools oder F12-Tools für Microsoft Edge verwenden möchten, drücken Sie F12. Mithilfe dieser Tools können Sie das DOM untersuchen und mit der App interagieren, indem Sie die JavaScript-Konsole verwenden.
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 angebunden. Zum Anfügen an und Erreichen von Haltepunkten im clientseitigen React-Code müssen Sie den Debugger an den richtigen Prozess anfügen. Hier ist eine Möglichkeit, einen Browser zu aktivieren und einen Prozess zum Debuggen anzufügen.

Aktivieren des Browsers für das Debuggen

Sie können entweder Microsoft Edge oder Google Chrome verwenden. Schließen Sie alle Fenster für den Zielbrowser. Für Microsoft Edge schließen Sie auch alle Instanzen von Chrome. Da beide Browser die Chromium-Codebasis gemeinsam nutzen, führt das Herunterfahren beider Browser zu den besten Ergebnissen.

Andere Browserinstanzen können verhindern, dass der Browser mit aktivierter Debugging-Funktion geöffnet wird. Browsererweiterungen verhindern möglicherweise den vollständigen Debugmodus. 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 aktivierter Debugging:

Wählen Sie in der Dropdownliste auf der Symbolleiste Debuggen die Option Durchsuchen mit aus.
Wählen Sie im Bildschirm Durchsuchen mit Ihren bevorzugten Browser aus, und klicken Sie auf Hinzufügen.
Geben Sie das Flag --remote-debugging-port=9222 in das Feld Argumente ein.
Geben Sie dem Browser einen neuen Anzeigenamen, z. B. Microsoft Edge mit Debuggen oder Chrome mit Debuggen, und klicken Sie dann auf OK.
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 Schaltfläche "Windows Start" klicken und Folgendes eingeben:

msedge --remote-debugging-port=9222

oder

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

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

Anfügen des Debuggers an clientseitige Skripts

Legen Sie im Visual Studio-Editor einen Haltepunkt entweder im app-bundle.js oder im app.tsx Quellcode fest.
- Legen Sie für app-bundle.jsden Haltepunkt in der render()-Funktion fest. Um die funktion render() in der app-bundle.js Datei zu finden, drücken Sie STRG+F, oder wählen Sie Bearbeiten>Suchen und Ersetzen>Schnellsucheaus, und geben Sie Rendern in das Suchfeld ein.
- Legen Sie den Haltepunkt 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 diesem Code:
```
output: {
    filename: "./app-bundle.js",
    devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
},
```
  Diese Einstellung für die Entwicklung ermöglicht das Debuggen in Visual Studio. Standardmäßig enthalten Webpack-Verweise in der Quellzuordnungsdatei das präfix webpack:///, wodurch Visual Studio daran hindert, die Quelldatei app.tsxzu 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.
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 debugfähige Browserkonfiguration mit einem benutzerfreundlichen Namen erstellt haben, wählen Sie diesen Browser als Debugziel aus.

Die App öffnet sich in einem neuen Tab.
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.
Im Dialogfeld An Prozess anhängen finden Sie eine gefilterte Liste der Browserinstanzen, an die Sie anfügen können.

Stellen Sie sicher, dass der richtige Debugger für Ihren Zielbrowser, JavaScript (Chrome) oder JavaScript (Microsoft Edge - Chromium), im Feld An anhängen angezeigt wird. Geben Sie Chrom oder Rand in das Filterfeld ein, um die Ergebnisse zu filtern.
Wählen Sie den Browserprozess mit dem richtigen Hostport aus, localhost in diesem Beispiel. Die Portnummer 1337 oder localhost kann auch im Feld Titel angezeigt werden, damit Sie den richtigen Prozess auswählen können.
Wählen Sie aus und fügen Siean.

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. Browsererweiterungen werden möglicherweise ausgeführt und verhindern den vollständigen Debugmodus.
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. Auf beide Weise können Sie Code durchlaufen und Variablen untersuchen.

Während der Debugger angehalten ist, können Sie den App-Zustand untersuchen, indem Sie mit dem Mauszeiger auf Variablen zeigen und Debuggerfenster verwenden. Um Code zu durchlaufen, drücken Sie F11- oder wählen Sie Debuggen>Schritt inaus, oder drücken Sie F10-, oder wählen Sie Debuggen>Schritt überaus. Um mit der Ausführung des Codes fortzufahren, drücken Sie F5, oder wählen Sie Weiteraus. Weitere Informationen zu grundlegenden Debugfeatures finden Sie unter Sehen Sie sich zuerst den Debuggeran.
- 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 Chrome-Erweiterungen, mithilfe des Task-Managers. 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.tsxenthält, da sonst der Visual Studio-Debugger app.tsxnicht finden kann.
  Oder versuchen Sie, die debugger;-Anweisung in app.tsxzu verwenden, oder legen Sie Haltepunkte in den Chrome-Entwicklertools oder den F12-Tools für Microsoft Edge fest.
- Wenn Sie nicht in den Code in app-bundle.jseinbrechen können, entfernen Sie die Source-Map-Datei app-bundle.js.map.