Zelfstudie: Een Node.js- en React-app maken in Visual Studio

Artikel
01/27/2025

Met Visual Studio kunt u eenvoudig een Node.js project maken en IntelliSense en andere ingebouwde functies gebruiken die ondersteuning bieden voor Node.js. In deze zelfstudie maakt u een Node.js web-app-project op basis van een Visual Studio-sjabloon. Vervolgens maakt u een eenvoudige app met React.

In deze zelfstudie leert u het volgende:

Een Node.js-project maken
NPM-pakketten toevoegen
React-code toevoegen aan uw app
JSX transpileren
Het foutopsporingsprogramma koppelen

Belangrijk

Vanaf Visual Studio 2022 kunt u ook een React-project maken met het aanbevolen CLI-projecttype. Sommige informatie in dit artikel is alleen van toepassing op het Node.js projecttype (.njsproj). De sjabloon die in dit artikel wordt gebruikt, is niet meer beschikbaar vanaf Visual Studio 2022 versie 17.8 Preview 2.

Voordat u begint, vindt u hier een korte veelgestelde vragen om u kennis te laten maken met enkele belangrijke concepten:

Wat is Node.js?

Node.js is een JavaScript-runtimeomgeving aan de serverzijde waarmee JavaScript-code wordt uitgevoerd.
Wat is npm?

De standaardpakketbeheerder voor Node.js is npm. Een pakketbeheerder maakt het eenvoudiger om Node.js broncodebibliotheken te publiceren en te delen. Npm Package Manager vereenvoudigt de installatie, het bijwerken en verwijderen van bibliotheken.
Wat is React?

React is een front-endframework voor het maken van een gebruikersinterface (UI).
Wat is JSX?

JSX is een JavaScript-syntaxisextensie die doorgaans wordt gebruikt met React om UI-elementen te beschrijven. U moet JSX-code transpileren naar JavaScript zonder opmaak voordat deze in een browser kan worden uitgevoerd.
Wat is webpack?

Webpack bundelt JavaScript-bestanden, zodat ze kunnen worden uitgevoerd in een browser en kunnen ook andere resources en assets transformeren of verpakken. Webpack kan een compiler, zoals Babel of TypeScript, opgeven om JSX- of TypeScript-code te transpileren naar JavaScript zonder opmaak.

Voorwaarden

Voor deze zelfstudie zijn de volgende vereisten vereist:

Visual Studio waarop de Node.js ontwikkelworkload is geïnstalleerd.

Als u Visual Studio nog niet hebt geïnstalleerd:
1. Ga naar de Visual Studio-downloads pagina om Visual Studio gratis te installeren.
2. Selecteer in het Visual Studio Installer de Node.js ontwikkelworkload en selecteer Install.
Als u Visual Studio hebt geïnstalleerd, maar de Node.js workload nodig hebt:
1. Ga in Visual Studio naar Hulpprogramma's>Hulpmiddelen en functies verkrijgen.
2. Kies in het installatieprogramma van Visual Studio de Node.js ontwikkelworkload en selecteer Wijzig om de workload te downloaden en te installeren.
De Node.js runtime geïnstalleerd:

Als u de Node.js runtime niet hebt geïnstalleerd, de LTS-versie installeren vanaf de Node.js website. De LTS-versie heeft de beste compatibiliteit met andere frameworks en bibliotheken.

De Node.js-hulpprogramma's in de Workload van Visual Studio Node.js ondersteunen zowel Node.js 32-bits als 64-bits architectuurversies. Visual Studio vereist slechts één versie en het Node.js-installatieprogramma ondersteunt slechts één versie tegelijk.

Visual Studio detecteert meestal automatisch de geïnstalleerde Node.js runtime. Zo niet, dan kunt u uw project zo configureren dat deze verwijst naar de geïnstalleerde runtime:
1. Nadat u een project hebt gemaakt, klikt u met de rechtermuisknop op het projectknooppunt en selecteert u Eigenschappen.
2. Stel in het deelvenster Eigenschappen het Node.exe pad in om te verwijzen naar een wereldwijde of lokale installatie van Node.js. U kunt het pad naar een lokale interpreter opgeven in elk van uw Node.js projecten.

Deze handleiding is getest met Node.js 12.6.2.

Een project maken

Maak eerst een Node.js-web-app-project.

Open Visual Studio.
Maak een nieuw project.

Druk op Esc om het startvenster te sluiten. Typ Ctrl + Q om het zoekvak te openen, typ Node.jsen kies vervolgens Lege webtoepassing - JavaScript Node.js. (Hoewel in deze zelfstudie de TypeScript-compiler wordt gebruikt, moet u beginnen met de JavaScript-sjabloon.)

Kies in het dialoogvenster dat verschijnt op Maken.

Als u het Lege Node.js Webapplicatie projectsjabloon niet ziet, moet u de Node.js ontwikkelworkload toevoegen. Zie de Vereistenvoor gedetailleerde instructies.

Visual Studio maakt de nieuwe oplossing en opent uw project.

(1) Gemarkeerd in vet uw project is, met de naam die u hebt opgegeven in het dialoogvenster Nieuw project. In het bestandssysteem wordt dit project vertegenwoordigd door een .njsproj-bestand in uw projectmap. U kunt eigenschappen en omgevingsvariabelen instellen die aan het project zijn gekoppeld door met de rechtermuisknop op het project te klikken en Eigenschappen te kiezen (of druk op Alt + Enter-). U kunt roundtripping uitvoeren met andere ontwikkelhulpprogramma's, omdat het projectbestand geen aangepaste wijzigingen aanbrengt in de Node.js projectbron.

(2) Op het hoogste niveau is een oplossing die standaard dezelfde naam heeft als uw project. Een oplossing, vertegenwoordigd door een .sln-bestand op schijf, is een container voor een of meer gerelateerde projecten.

(3) Op het npm-knooppunt worden geïnstalleerde NPM-pakketten weergegeven. U kunt met de rechtermuisknop op het npm-knooppunt klikken om npm-pakketten te zoeken en installeren met behulp van een dialoogvenster of pakketten installeren en bijwerken met behulp van de instellingen in package.json en met de rechtermuisknop op opties in het npm-knooppunt klikken.

(4) package.json is een bestand dat door NPM wordt gebruikt voor het beheren van pakketafhankelijkheden en pakketversies voor lokaal geïnstalleerde pakketten. Zie Npm-pakketten beherenvoor meer informatie.

(5) Projectbestanden zoals server.js worden weergegeven onder het projectknooppunt. server.js is het opstartbestand van het project en daarom wordt het weergegeven in vetgedrukte. U kunt het opstartbestand instellen door met de rechtermuisknop op een bestand in het project te klikken en Instellen te selecteren als Node.js opstartbestand.

NPM-pakketten toevoegen

Voor deze app moeten de volgende NPM-modules correct worden uitgevoerd:

reageren
react-dom
uitdrukken
pad
ts-loader
getypte tekst
webpack
webpack-cli

Een pakket installeren:

Klik in Solution Explorermet de rechtermuisknop op het knooppunt npm en selecteer Nieuwe npm-pakketten installeren.
Zoek in het dialoogvenster Install New npm Packages naar het react pakket en selecteer Install Package om het te installeren.

In het dialoogvenster Nieuwe npm-pakketten installeren kunt u ervoor kiezen om de meest recente pakketversie te installeren of om een versie op te geven. Als u ervoor kiest om de huidige versies te installeren, maar later onverwachte fouten tegenkomt, installeert u de exacte pakketversies die in de volgende stap worden vermeld.

In het venster Uitvoer in het onderste deel van het deelvenster van Visual Studio ziet u de voortgang van de installatie van pakketten. Open het venster Uitvoer door Weergave>Uitvoer te selecteren of door op Ctrl+Alt+O-te drukken. Selecteer Npm-in het venster Uitvoer weergeven uit veld Uitvoer.

Wanneer het is geïnstalleerd, wordt het pakket weergegeven onder het knooppunt npm in Solution Explorer.

Bestand package.json van het project wordt bijgewerkt met de nieuwe pakketinformatie, inclusief de pakketversie.

In plaats van de gebruikersinterface te gebruiken om de rest van de pakketten één voor één te zoeken en toe te voegen, kunt u de vereiste pakketcode in package.jsonplakken.

Open package.json vanuit Solution Explorerin de Visual Studio-editor. Voeg de volgende dependencies sectie toe vóór het einde van het bestand:
```
"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"
},
```
Als het bestand al een dependencies sectie heeft, vervangt u het door de voorgaande JSON-code. Zie package.json configuratie-voor meer informatie over het gebruik van het package.json-bestand.
Druk op Ctrl+S- of selecteer Bestand>Opslaan package.json om de wijzigingen op te slaan.
Klik in Solution Explorermet de rechtermuisknop op het knooppunt npm in uw project en selecteer Npm-pakketten installeren.

Met deze opdracht wordt de npm-installatieopdracht rechtstreeks uitgevoerd om alle pakketten in packages.jsonte installeren.

Selecteer het venster Uitvoer in het onderste deelvenster om de voortgang van de installatie te zien. De installatie kan enkele minuten duren en de resultaten worden mogelijk niet onmiddellijk weergegeven. Zorg ervoor dat u Npm- selecteert in het Uitvoer van veld weergeven in het venster Uitvoer.

Na de installatie worden de npm-modules weergegeven in het knooppunt npm in Solution Explorer.

Notitie

U kunt ook npm-pakketten installeren met behulp van de opdrachtregel. Klik in Solution Explorermet de rechtermuisknop op de projectnaam en selecteer Opdrachtprompt hier openen. Gebruik standaardopdrachten Node.js om pakketten te installeren.

Projectbestanden toevoegen

Voeg vervolgens vier nieuwe bestanden toe aan uw project.

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

Voor deze eenvoudige app voegt u de nieuwe projectbestanden toe in de hoofdmap van het project. Voor de meeste apps voegt u de bestanden toe aan submappen en past u de relatieve padverwijzingen dienovereenkomstig aan.

Selecteer in Solution Explorerde projectnaam en druk op Ctrl+Shift+Aof klik met de rechtermuisknop op de projectnaam en selecteer Toevoegen>Nieuw item.

Als u niet alle itemsjablonen ziet, kiest u Alle sjablonen weergevenen kiest u vervolgens de itemsjabloon.
Kies in het dialoogvenster Nieuw item toevoegenTypeScript JSX-bestand, typ de naam app.tsx-en selecteer Toevoegen of OK.
Herhaal deze stappen om een JavaScript-bestand toe te voegen met de naam webpack-config.js.
Herhaal deze stappen om een HTML-bestand toe te voegen met de naam index.html.
Herhaal deze stappen om een TypeScript JSON-configuratiebestand toe te voegen met de naam tsconfig.json.

App-code toevoegen

Open in Solution Explorerserver.js en vervang de bestaande code door de volgende 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');
});
```
In de voorgaande code wordt Express gebruikt om Node.js te starten als uw webtoepassingsserver. De code stelt de poort in op het poortnummer dat is geconfigureerd in de projecteigenschappen, wat standaard 1337 is. Als u de projecteigenschappen wilt openen, klikt u met de rechtermuisknop op de projectnaam in Solution Explorer- en selecteert u Eigenschappen.

Open app.tsx en voer de volgende code in:

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

De voorgaande code maakt gebruik van JSX-syntaxis en React om een bericht weer te geven.

Open index.html en vervang de sectie body door de volgende code:
```
<body>
    <div id="root"></div>
    
    <script src="./dist/app-bundle.js"></script>
</body>
```
Deze HTML-pagina laadt app-bundle.js, die de JSX- en React-code bevat die is getranspileerd naar gewone JavaScript. Momenteel is app-bundle.js een leeg bestand. In de volgende sectie configureert u opties om de code te transpileren.

Opties voor webpack en TypeScript-compiler configureren

Vervolgens voegt u webpackconfiguratiecode toe aan webpack-config.js. U voegt een eenvoudige webpackconfiguratie toe waarmee een invoerbestand wordt opgegeven, app.tsx-en een uitvoerbestand, app-bundle.js, voor het bundelen en transpileren van JSX naar gewone JavaScript. Voor transpilatie configureert u ook enkele TypeScript-compileropties. Deze basisconfiguratiecode is een inleiding tot webpack en de TypeScript-compiler.

Open webpack-config.js in Solution Exploreren voeg de volgende code toe.

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'
                }
            }
        ]
    }
}

De webpack-configuratiecode geeft webpack opdracht om het TypeScript-laadprogramma te gebruiken om de JSX te transpileren.

Open tsconfig.json en vervang de inhoud door de volgende code, waarmee de TypeScript-compileropties worden opgegeven:

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

De code geeft app.tsx op als het bronbestand.

Druk op Ctrl+Shift+S of selecteer Bestand>Alles opslaan om alle wijzigingen op te slaan.

De JSX transpileren

Klik in Solution Explorermet de rechtermuisknop op de projectnaam en selecteer Opdrachtprompt hier openen.
Voer in de opdrachtprompt de volgende webpack-opdracht in:

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

Het opdrachtpromptvenster toont het resultaat.

Als u fouten ziet in plaats van de voorgaande uitvoer, moet u deze oplossen voordat uw app werkt. Als uw npm-pakketversies afwijken van de versies die in deze zelfstudie worden opgegeven, kan dit fouten veroorzaken. Probeer het volgende om de fouten op te lossen:
- Gebruik de exacte versies die in de vorige stap worden weergegeven, als u dat nog niet hebt gedaan
  
  Of als u nog steeds fouten ziet:
- Installeer de meest recente versies van de npm-pakketten door met de rechtermuisknop op het npm-knooppunt in Solution Explorer te klikken en NPM-pakketten installerente kiezen.
Als een of meer pakketversies zijn afgeschaft en resulteren in een fout, moet u mogelijk een recentere versie installeren om fouten op te lossen. Zie package.json configuratie-voor meer informatie over het gebruik van package.json om npm-pakketversies te beheren.
Klik in Solution Explorermet de rechtermuisknop op het projectknooppunt en selecteer Bestaande map>toevoegen.
Selecteer de dist map en klik vervolgens op Map selecteren.

Visual Studio voegt de map dist, die app-bundle.js en app-bundle.js.map-bevat, toe aan het project.
Open app-bundle.js om de getranspileerde JavaScript-code te bekijken.
Als u wordt gevraagd of u extern gewijzigde bestanden opnieuw wilt laden, selecteert u Ja op alles.

Wanneer u wijzigingen aanbrengt in app.tsx-, moet u de opdracht webpack opnieuw uitvoeren. Als u deze stap wilt automatiseren, kunt u een buildscript toevoegen om de JSX te transpileren.

Een buildscript toevoegen om de JSX te transpileren

Visual Studio-versies vanaf Visual Studio 2019 vereisen een buildscript. In plaats van JSX te transpileren op de opdrachtregel, zoals wordt weergegeven in de voorgaande sectie, kunt u JSX transpileren bij het bouwen vanuit Visual Studio.

Open package.json en voeg de volgende sectie toe na de dependencies sectie:
```
"scripts": {
 "build": "webpack-cli --config webpack-config.js"
}
```
Sla uw wijzigingen op.

De app uitvoeren

Selecteer in de werkbalk Foutopsporingwebserver (Microsoft Edge) of Webserver (Google Chrome) als het doel voor foutopsporing.

Als u weet dat het doel voor foutopsporing van uw voorkeur beschikbaar is op uw computer, maar dit niet wordt weergegeven als optie, selecteert u Bladeren met in de vervolgkeuzelijst voor foutopsporingsdoel. Selecteer uw standaardbrowserdoel in de lijst en selecteer Als standaard instellen.
Als u de app wilt uitvoeren, drukt u op F5, selecteert u de groene pijlknop of selecteert u Foutopsporing>Start Debugging.

Er wordt een Node.js-consolevenster geopend dat de poort van de debugger weergeeft.

Visual Studio start de app door het opstartbestand server.jste starten.
Sluit de browser- en consolevensters.

Een onderbrekingspunt instellen en de app uitvoeren

Onderbrekingspunten zijn de meest elementaire en essentiële functie van betrouwbare foutopsporing. Een onderbrekingspunt geeft aan waar Visual Studio de actieve code moet onderbreken. U kunt vervolgens variabele waarden bekijken, het geheugengedrag observeren, of controleren of een vertakking van code wordt uitgevoerd.

Klik in server.jsin de rugmarge links van de declaratie staticPath om een onderbrekingspunt in te stellen:
Als u de app wilt uitvoeren, drukt u op F5- of selecteert u Foutopsporing>Foutopsporing starten.

Het foutopsporingsprogramma pauzeert op het onderbrekingspunt dat u hebt ingesteld, met de huidige instructie gemarkeerd. U kunt nu de status van uw app inspecteren door de muisaanwijzer over variabelen te bewegen die momenteel binnen het bereik vallen, met behulp van foutopsporingsprogrammavensters zoals de Locals en Watch vensters.
Als u de app wilt blijven uitvoeren, drukt u op F5-, selecteert u Doorgaan op de werkbalk Foutopsporing of selecteert u Foutopsporing>Doorgaan.

Als u de Chrome Developer Tools of F12 Tools for Microsoft Edge wilt gebruiken, drukt u op F12. U kunt deze hulpprogramma's gebruiken om de DOM te onderzoeken en te communiceren met de app met behulp van de JavaScript-console.
Sluit de browser- en consolevensters.

Een onderbrekingspunt instellen en bereiken in de React-code aan de clientzijde

In de vorige sectie hebt u het foutopsporingsprogramma gekoppeld aan Node.js code aan de serverzijde. Als u wilt koppelen aan onderbrekingspunten in de React-code aan de clientzijde, moet u het foutopsporingsprogramma koppelen aan het juiste proces. Hier volgt een manier om een browser in te schakelen en een proces voor foutopsporing toe te voegen.

De browser inschakelen voor foutopsporing

U kunt Microsoft Edge of Google Chrome gebruiken. Sluit alle vensters voor de doelbrowser. Sluit voor Microsoft Edge ook alle exemplaren van Chrome af. Omdat beide browsers de Chromium-codebasis delen, biedt het afsluiten van beide browsers de beste resultaten.

Andere browserexemplaren kunnen voorkomen dat de browser wordt geopend met foutopsporing ingeschakeld. Browserextensies kunnen de volledige foutopsporingsmodus voorkomen. Mogelijk moet u Taakbeheer gebruiken om alle actieve Chrome-exemplaren te zoeken en te beëindigen.

Ga als volgende te werk om uw browser te starten met foutopsporing ingeschakeld:

Selecteer Bladeren met in de keuzelijst in de werkbalk Foutopsporing.
Op het scherm Bladeren met, met je voorkeursbrowser gemarkeerd, selecteer Toevoegen.
Voer de vlag --remote-debugging-port=9222 in het veld Arguments in.
Geef de browser een nieuwe beschrijvende naam, zoals Edge met foutopsporing of Chrome met foutopsporingen selecteer vervolgens OK-.
Selecteer op het scherm : Bladeren met de optie : Bladeren.

U kunt ook de opdracht uitvoeren openen door met de rechtermuisknop op de knop Start van Windows te klikken en het volgende in te voeren:

msedge --remote-debugging-port=9222

of

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

De browser begint met foutopsporing ingeschakeld. De app wordt nog niet uitgevoerd, dus de browserpagina is leeg.

Het foutopsporingsprogramma koppelen aan het script aan de clientzijde

Stel in de Visual Studio-editor een onderbrekingspunt in de app-bundle.js of app.tsx broncode in.
- Stel voor app-bundle.jshet onderbrekingspunt in de functie render(). Als u de functie render() in het app-bundle.js bestand wilt zoeken, drukt u op Ctrl+F of selecteert u Bewerken>Zoek en Vervang>Snelle Zoeken voert u render in het zoekveld in.
- Stel voor app.tsx-het onderbrekingspunt in de render()-functie in op de instructie return.
  
  Als u het onderbrekingspunt instelt in app.tsx-, werkt u ook webpack-config.js bij om de volgende code te vervangen en slaat u de wijzigingen op.
  
  Vervang deze code:
```
output: {
    filename: "./app-bundle.js",
},
```
  Met deze code:
```
output: {
    filename: "./app-bundle.js",
    devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
},
```
  Met deze instelling voor alleen-ontwikkeling kunt u foutopsporing in Visual Studio inschakelen. Webpackverwijzingen in het bronoverzichtsbestand bevatten standaard het webpack:/// voorvoegsel, waardoor Visual Studio het bronbestand niet kan vinden app.tsx-. Deze instelling overschrijft de gegenereerde verwijzingen in het brontoewijzingsbestand app-bundle.js.mapbij het bouwen van de app. Deze instelling wijzigt met name de verwijzing naar het bronbestand van webpack:///./app.tsx in ./app.tsx-, waardoor foutopsporing mogelijk is.
Selecteer de doelbrowser als het doel voor foutopsporing in Visual Studio en druk vervolgens op Ctrl+F5-of selecteer Foutopsporing>Starten zonder foutopsporingom de app in de browser uit te voeren.

Als u een browserconfiguratie met foutopsporing met een beschrijvende naam hebt gemaakt, kiest u die browser als uw doel voor foutopsporing.

De app wordt geopend in een nieuw browsertabblad.
Selecteer Foutopsporing>Koppelen aan proces, of druk op Ctrl+Alt+P.

Tip

Zodra u de eerste keer met het proces verbonden bent, kunt u snel opnieuw verbinden met diezelfde door Debuggen>Opnieuw verbinden met Proces te selecteren of door op Shift+Alt+Pte drukken.
In het dialoogvenster Bijvoegen aan proces krijgt u een gefilterde lijst met browserinstanties waaraan u zich kunt koppelen.

Zorg ervoor dat het juiste foutopsporingsprogramma voor uw doelbrowser, JavaScript (Chrome) of JavaScript-(Microsoft Edge - Chromium) wordt weergegeven in het veld Koppelen aan. Typ chrome of edge in het filtervak om de resultaten te filteren.
Selecteer het browserproces met de juiste hostpoort localhost in dit voorbeeld. Het poortnummer 1337 of localhost kan ook worden weergegeven in het veld Titel om u te helpen het juiste proces te selecteren.
Selecteer en voegtoe.

In het volgende voorbeeld ziet u een venster Koppelen aan proces voor de Microsoft Edge-browser.

Tip

Als de debugger niet kan worden gekoppeld en u het bericht ziet Kan niet aan het proces koppelen. Een bewerking is niet legaal in de huidige staat.gebruikt u Taakbeheer om alle exemplaren van de doelbrowser te sluiten voordat u de browser in de foutopsporingsmodus start. Browserextensies worden mogelijk uitgevoerd en voorkomen dat de modus voor volledige foutopsporing wordt uitgevoerd.
Omdat de code met het onderbrekingspunt al is uitgevoerd, vernieuwt u de browserpagina om het onderbrekingspunt te bereiken.

Afhankelijk van uw omgeving, browserstatus en welke stappen u eerder hebt gevolgd, kunt u het onderbrekingspunt in app-bundle.js of de toegewezen locatie in app.tsx-bereiken. In beide gevallen kunt u code doorlopen en variabelen onderzoeken.

Terwijl het foutopsporingsprogramma is onderbroken, kunt u de status van uw app onderzoeken door de muisaanwijzer op variabelen te bewegen en de vensters voor foutopsporingsprogramma's te gebruiken. Als u de code wilt doorlopen, drukt u op F11 of selecteert u Foutopsporing>Stap Inof drukt u op F10 of selecteert u Foutopsporing>Stap Over. Als u de code wilt blijven uitvoeren, drukt u op F5- of selecteert u Doorgaan. Zie Bekijk het foutopsporingsprogrammavoor meer informatie over basisfuncties voor foutopsporing.
- Als u in app.tsxgeen toegang tot de code kunt krijgen, probeer dan opnieuw verbinding te maken met het proces via Verbinden met proces om de debugger te gebruiken, zoals beschreven in de vorige stappen. Zorg ervoor dat uw omgeving juist is ingesteld:
  - Sluit alle browserexemplaren, inclusief Chrome-extensies, met behulp van Taakbeheer. Zorg ervoor dat u de browser start in de foutopsporingsmodus.
  - Zorg ervoor dat het bronkaartbestand een verwijzing naar ./app.tsx- bevat en niet webpack:///./app.tsx, waardoor het Foutopsporingsprogramma van Visual Studio niet app.tsx-kan vinden.
  U kunt ook de debugger;-statement in app.tsx-gebruiken of breakpoints instellen in de Chrome Developer Tools of F12 Tools voor Microsoft Edge.
- Als u in app-bundle.jsgeen code kunt inbreken, verwijdert u het bronoverzichtbestand app-bundle.js.map.