Fouten opsporen in een JavaScript- of TypeScript-app in Visual Studio

U kunt fouten opsporen in JavaScript- en TypeScript-code met behulp van Visual Studio. U kunt onderbrekingspunten bereiken, het foutopsporingsprogramma koppelen, variabelen inspecteren, de aanroepstack bekijken en andere foutopsporingsfuncties gebruiken.

Tip

Als u Visual Studio nog niet hebt geïnstalleerd, gaat u naar de Visual Studio-downloadpagina pagina om deze gratis te installeren.

Foutopsporing configureren

Voor .esproj projecten in Visual Studio 2022 gebruikt Visual Studio Code een launch.json-bestand om het foutopsporingsprogramma te configureren en aan te passen. launch.json is een configuratiebestand voor foutopsporingsprogramma's.

Visual Studio koppelt het foutopsporingsprogramma alleen aan gebruikerscode. Voor .esproj projecten kunt u gebruikerscode (ook wel Just My Code-instellingen genoemd) configureren in Visual Studio met behulp van de skipFiles-instelling in launch.json. Dit werkt hetzelfde als de launch.json-instellingen in VS Code. Voor meer informatie over skipFiles en andere configuratieopties voor foutopsporing, zie Oninteressante Code Overslaan en Startconfiguratie-attributen.

Fouten opsporen in script aan serverzijde

1. Open uw project in Visual Studio en open een JavaScript-bestand aan de serverzijde (zoals server.js), klik in de rugmarge om een onderbrekingspunt in te stellen:

   

   Onderbrekingspunten zijn de meest elementaire en essentiële functie van betrouwbare foutopsporing. Een onderbrekingspunt geeft aan waar Visual Studio de actieve code moet onderbreken, zodat u de waarden van variabelen of het gedrag van het geheugen kunt bekijken, of of een vertakking van code wordt uitgevoerd.

2. Druk op F5 (Debug>Start Debugging) om uw app uit te voeren.

   Het foutopsporingsprogramma pauzeert op het onderbrekingspunt dat u instelt (IDE markeert de instructie op de gele achtergrond). U kunt nu de status van uw app inspecteren door de muisaanwijzer over variabelen in het bereik te bewegen, met behulp van foutopsporingsprogrammavensters zoals de Locals en Watch-vensters.

   

3. Druk op F5- om door te gaan met de app.

4. Als u de Chrome Developer Tools wilt gebruiken, drukt u op F12- in de Chrome-browser. Met deze hulpprogramma's kunt u de DOM onderzoeken of de app gebruiken met behulp van de JavaScript-console.

Fouten opsporen in script aan clientzijde

Visual Studio biedt alleen ondersteuning voor foutopsporing aan de clientzijde voor Chrome en Microsoft Edge. In sommige scenario's raakt het foutopsporingsprogramma automatisch onderbrekingspunten in JavaScript- en TypeScript-code en ingesloten scripts op HTML-bestanden.

• Voor foutopsporing van scripts aan de clientzijde in ASP.NET-apps kiest u Extra>Opties>Foutopsporingen selecteert u JavaScript-foutopsporing inschakelen voor ASP.NET (Chrome, Edge en IE).

  Als u liever Chrome Developer Tools of F12 Tools for Microsoft Edge gebruikt voor het opsporen van fouten in scripts aan de clientzijde, moet u deze instelling uitschakelen.

  Zie dit blogbericht voor Google Chromevoor meer informatie. Zie TypeScript toevoegen aan een bestaande ASP.NET Core-appvoor foutopsporing in TypeScript in ASP.NET Core.

• Volg voor Node.js toepassingen en andere JavaScript-projecten de stappen die in dit artikel worden beschreven.

Notitie

Voor ASP.NET en ASP.NET Core wordt het debuggen van ingesloten scripts in .CSHTML-bestanden niet ondersteund. JavaScript-code moet zich in afzonderlijke bestanden bevinden om foutopsporing in te schakelen.

Uw app voorbereiden op foutopsporing

Als uw bron wordt minificeerd of gemaakt door een transpiler zoals TypeScript of Babel, gebruikt u brontoewijzingen voor de beste foutopsporingservaring. U kunt de debugger zelfs koppelen aan een actief clientside-script zonder source maps. U kunt echter mogelijk alleen breekpunten instellen en bereiken in het verkleinde of gecompileerde bestand, niet in het bronbestand. In een Vue.js-app wordt het geminimaliseerde script bijvoorbeeld als een tekenreeks doorgegeven aan een eval-statement, en er is geen manier om deze code effectief stap voor stap door te lopen met de Visual Studio-debugger, tenzij u sourcemaps gebruikt. Voor complexe foutopsporingsscenario's kunt u in plaats daarvan Chrome Developer Tools of F12 Tools for Microsoft Edge gebruiken.

Zie Brontoewijzingen genereren voor foutopsporingvoor hulp bij het genereren van brontoewijzingen.

De browser voorbereiden voor foutopsporing

Gebruik voor dit scenario Microsoft Edge of Chrome.

1. Sluit alle vensters voor de doelbrowser, Microsoft Edge of Chrome-exemplaren.

   Andere browserexemplaren kunnen voorkomen dat de browser wordt geopend met foutopsporing ingeschakeld. (Browserextensies kunnen actief zijn en de volledige foutopsporingsmodus onderscheppen, dus mogelijk moet u Taakbeheer openen om onverwachte processen van Chrome of Edge te vinden en te sluiten.)

   Voor de beste resultaten sluit u alle exemplaren van Chrome af, zelfs als u met Microsoft Edge werkt. Beide browsers gebruiken dezelfde chromium-codebasis.

2. Start uw browser met foutopsporing ingeschakeld.

   Vanaf Visual Studio 2019 kunt u de vlag --remote-debugging-port=9222 instellen bij het starten van de browser door Bladeren met...> te selecteren in de werkbalk Foutopsporing.

   

   Als u de opdracht Bladeren met... niet ziet in de werkbalk Foutopsporing, selecteert u een andere browser en probeert u het opnieuw.

   Kies in het dialoogvenster Bladeren met Toevoegenen stel de vlag in het veld Argumenten in. Gebruik een andere beschrijvende naam voor de browser, zoals Edge-foutopsporingsmodus of Chrome-foutopsporingsmodus. Voor meer informatie, zie de Releaseopmerkingen.

   

   Selecteer Blader om uw app te starten met de browser in de foutopsporingsmodus.

   U kunt ook de opdracht uitvoeren openen vanuit de windows startknop (klik met de rechtermuisknop en kies uitvoeren) en voer de volgende opdracht in:

   msedge --remote-debugging-port=9222

   of

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

   Hiermee start u uw browser met foutopsporing ingeschakeld.

   De app wordt nog niet uitgevoerd, dus u krijgt een lege browserpagina. (Als u de browser start met de opdracht Uitvoeren, moet u de juiste URL voor uw app-exemplaar plakken.)

Het foutopsporingsprogramma koppelen aan het script aan de clientzijde

Als u het foutopsporingsprogramma vanuit Visual Studio wilt koppelen en onderbrekingspunten in de code aan de clientzijde wilt bereiken, hebt u hulp nodig bij het identificeren van het juiste proces. Hier volgt een manier om deze in te schakelen.

1. Zorg ervoor dat uw app wordt uitgevoerd in de browser in de foutopsporingsmodus, zoals beschreven in de vorige sectie.

   Als u een browserconfiguratie met een beschrijvende naam hebt gemaakt, kiest u deze als foutopsporingsdoel en drukt u op Ctrl+F5 (Fouten opsporen>Starten zonder foutopsporing) om de app in de browser uit te voeren.

2. Schakel over naar Visual Studio en stel vervolgens een onderbrekingspunt in uw broncode in. Dit kan een JavaScript-bestand, TypeScript-bestand of een JSX-bestand zijn. (Stel het onderbrekingspunt in een regel code in die onderbrekingspunten toestaat, zoals een retourinstructie of een var-declaratie.)

   

   Als u de specifieke code in een getranspileerd bestand wilt zoeken, gebruikt u Ctrl+F (Bewerken>Zoeken en vervangen>Snel zoeken).

   Als u code aan de clientzijde wilt gebruiken om een onderbrekingspunt te bereiken in een TypeScript-bestand, .vueof JSX- bestand, is doorgaans het gebruik van brontoewijzingenvereist. Een bronkaart moet correct worden geconfigureerd ter ondersteuning van foutopsporing in Visual Studio.

3. Kies Foutopsporing>Verbinden met Proces.

   Advies

   Vanaf Visual Studio 2017, nadat u het proces de eerste keer hebt gekoppeld door deze stappen te volgen, kunt u snel opnieuw koppelen aan hetzelfde proces door Fouten opsporen>Opnieuw koppelen aan Proceste kiezen.

4. Selecteer in het dialoogvenster Koppelen aan procesJavaScript en TypeScript (Chrome Dev Tools/V8 Inspector) als het verbindingstype.

   Het debuggerdoel, zoals http://localhost:9222, moet worden weergegeven in het veld Verbindingsdoel .

5. Selecteer in de lijst met browserinstanties het browserproces met de juiste hostpoort (https://localhost:7184/ in dit voorbeeld), en selecteer Koppelen.

   De poort (bijvoorbeeld 7184) kan ook worden weergegeven in het veld Titel om u te helpen het juiste browserexemplaar te selecteren.

   In het volgende voorbeeld ziet u hoe dit eruitziet naar de Microsoft Edge-browser.

   

   Tip

   Als de debugger niet wordt gekoppeld en ontvangt u het bericht 'Kan foutopsporingsadapter niet starten' of 'Kan niet koppelen aan het proces'. Een bewerking is niet legaal in de huidige status.", gebruik Windows Taakbeheer om alle exemplaren van de doelbrowser te sluiten voordat u de browser start in de foutopsporingsmodus. Browserextensies kunnen actief zijn en volledige foutopsporingsmodus verhinderen.

6. De code met het onderbrekingspunt is mogelijk al uitgevoerd en vernieuw uw browserpagina. Voer zo nodig actie uit om ervoor te zorgen dat de code met het onderbrekingspunt wordt uitgevoerd.

   Terwijl deze is onderbroken in de debugger, kunt u de status van uw app onderzoeken door met de muis over variabelen te bewegen en de debugger-vensters te gebruiken. U kunt de debugger vooruit laten gaan door de code te doorlopen (F5, F10en F11). Zie Bekijk het foutopsporingsprogrammavoor meer informatie over basisfuncties voor foutopsporing.

   U kunt het onderbrekingspunt bereiken in een getranspileerd .js bestand of bronbestand, afhankelijk van uw app-type, welke stappen u eerder hebt gevolgd en andere factoren, zoals uw browserstatus. In beide gevallen kunt u code doorlopen en variabelen onderzoeken.

   • Als u code wilt insplitsen in een TypeScript-, JSX- of .vue bronbestand en dit niet kunt doen, controleert u of uw omgeving juist is ingesteld, zoals beschreven in de sectie Probleemoplossing.

   • Als u code wilt inbreken in een getranspileerd JavaScript-bestand (bijvoorbeeld app-bundle.js) en dit niet kunt doen, verwijdert u het brontoewijzingsbestand filename.js.map.

Problemen met onderbrekingspunten en bronkaarten oplossen

Als u code wilt inbreken in een TypeScript- of JSX-bronbestand en dit niet kunt doen, gebruikt u Koppelen aan proces zoals beschreven in de vorige sectie om het foutopsporingsprogramma toe te voegen. Zorg ervoor dat uw omgeving juist is ingesteld:

• Sluit alle browserexemplaren, inclusief Chrome-extensies (met behulp van Taakbeheer), zodat u de browser kunt uitvoeren in de foutopsporingsmodus.

• Zorg ervoor dat u de browser starten in de foutopsporingsmodus.

• Zorg ervoor dat het brontoewijzingsbestand het juiste relatieve pad naar het bronbestand bevat en dat het geen niet-ondersteunde voorvoegsels zoals webpack:///bevat, waardoor het Foutopsporingsprogramma van Visual Studio geen bronbestand kan vinden. Een verwijzing zoals webpack:///.app.tsx kan bijvoorbeeld worden gecorrigeerd in ./app.tsx-. U kunt dit handmatig doen in het bronoverzichtsbestand (wat handig is voor testen) of via een aangepaste buildconfiguratie. Zie Brontoewijzingen genereren voor foutopsporingvoor meer informatie.

Als u code in een bronbestand moet inbreken (bijvoorbeeld app.tsx) en dit niet kunt doen, kunt u in plaats daarvan de debugger; instructie in het bronbestand gebruiken of onderbrekingspunten instellen in de Chrome Developer Tools (of F12 Tools for Microsoft Edge).

Brontoewijzingen genereren voor foutopsporing

Visual Studio biedt de mogelijkheid om brontoewijzingen te gebruiken en te genereren op JavaScript-bronbestanden. Dit is vaak vereist als uw bron wordt geminimificeerd of gemaakt door een transpiler zoals TypeScript of Babel. De beschikbare opties zijn afhankelijk van het projecttype.

• Een TypeScript-project in Visual Studio genereert standaard brontoewijzingen voor u. Zie Bronkaarten configureren met behulp van een tsconfig.json-bestandvoor meer informatie.

• In een JavaScript-project kunt u brontoewijzingen genereren met behulp van een bundelaar zoals webpack en een compiler zoals de TypeScript-compiler (of Babel), die u aan uw project kunt toevoegen. Voor de TypeScript-compiler moet u ook een tsconfig.json-bestand toevoegen en de optie sourceMap compiler instellen. Zie Een Node.js-app maken met Reactvoor een voorbeeld waarin wordt getoond hoe u dit doet met behulp van een eenvoudige webpackconfiguratie.

Notitie

Lees Wat zijn bronkaarten? voordat u doorgaat.

Als u geavanceerde instellingen voor brontoewijzingen wilt configureren, gebruikt u een tsconfig.json of de projectinstellingen in een TypeScript-project, maar niet beide.

Als u foutopsporing wilt inschakelen met Visual Studio, moet u ervoor zorgen dat de verwijzing(en) naar uw bronbestand in de gegenereerde brontoewijzing juist zijn (dit kan een test vereisen). Als u bijvoorbeeld webpack gebruikt, bevatten verwijzingen in het brontoewijzingsbestand het webpack:/// voorvoegsel, waardoor Visual Studio geen TypeScript- of JSX-bronbestand kan vinden. Wanneer u dit voor foutopsporingsdoeleinden corrigeert, moet de verwijzing naar het bronbestand (zoals app.tsx), worden gewijzigd van iets als webpack:///./app.tsx in iets zoals ./app.tsx, waardoor foutopsporing mogelijk is (het pad is relatief ten opzichte van uw bronbestand). In het volgende voorbeeld ziet u hoe u bronkaarten in webpack kunt configureren. Dit is een van de meest voorkomende bundelaars, zodat ze met Visual Studio werken.

(Alleen webpack) Als u het onderbrekingspunt instelt in een TypeScript van een JSX-bestand (in plaats van een getranspileerd JavaScript-bestand), moet u de configuratie van uw webpack bijwerken. In webpack-config.jsmoet u bijvoorbeeld mogelijk de volgende code vervangen:

  output: {
    filename: "./app-bundle.js", // This is an example of the filename in your project
  },

met deze code:

  output: {
    filename: "./app-bundle.js", // Replace with the filename in your project
    devtoolModuleFilenameTemplate: '[absolute-resource-path]'  // Removes the webpack:/// prefix
  },

Dit is een instelling voor alleen ontwikkeling om foutopsporing van code aan de clientzijde in Visual Studio in te schakelen.

Voor gecompliceerde scenario's werken de browserhulpprogramma's (F12) soms het beste voor foutopsporing, omdat hiervoor geen wijzigingen in aangepaste voorvoegsels nodig zijn.

Sourcemaps configureren met behulp van een tsconfig.json-bestand

Als u een tsconfig.json bestand aan uw project toevoegt, behandelt Visual Studio de hoofdmap van de map als een TypeScript-project. Als u het bestand wilt toevoegen, klik met de rechtermuisknop op het project in Solution Explorer en kies Add > New Item > TypeScript JSON Configuration File. Een tsconfig.json-bestand zoals het volgende wordt toegevoegd aan uw project.

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

Compileropties voor tsconfig.json-bestand

• inlineSourceMap: een enkel bestand met brontoewijzingen verzenden in plaats van een afzonderlijke brontoewijzing te maken voor elk bronbestand.
• inlineSources: Geef de bron weer naast de source maps binnen één bestand; vereist dat inlineSourceMap of sourceMap is ingesteld.
• mapRoot-: hiermee geeft u de locatie op waar het foutopsporingsprogramma bronkaartbestanden (.map) moet vinden in plaats van de standaardlocatie. Gebruik deze vlag als de runtime-.map-bestanden zich op een andere locatie moeten bevinden dan de .js-bestanden. De opgegeven locatie is ingesloten in de brontoewijzing om het foutopsporingsprogramma naar de locatie van de .map-bestanden te leiden.
• sourceMap: genereert een overeenkomend .map bestand.
• sourceRoot: hiermee geeft u de locatie op waar het foutopsporingsprogramma TypeScript-bestanden moet vinden in plaats van de bronlocaties. Gebruik deze vlag als de runtimebronnen zich op een andere locatie moeten bevinden dan de locatie op ontwerptijd. De opgegeven locatie wordt ingesloten in de brontoewijzing om het foutopsporingsprogramma naar de locatie van de bronbestanden te leiden.

Raadpleeg de pagina Compileropties in het TypeScript-handboek voor meer informatie over de compileropties.

Fouten opsporen in JavaScript in dynamische bestanden met Behulp van Razor (ASP.NET)

In Visual Studio 2022 kunt u Razor-pagina's debuggen met behulp van breakpoints. Zie Hulpprogramma's voor foutopsporing gebruiken in Visual Studiovoor meer informatie.

Verwante inhoud

Eigenschappen, React, Angular, Vue