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.

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 client-side scripts in ASP.NET-apps kiest u Extra>Opties>Foutopsporing, en selecteert u JavaScript-debugging 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.

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 client-side script zonder de source maps. Mogelijk kunt u echter alleen onderbrekingspunten instellen en bereiken in het geminificeerde of getranspileerde bestand, niet in het bronbestand. In een Vue.js-app wordt het minified script bijvoorbeeld als een tekenreeks doorgegeven aan een eval-instructie en is er geen manier om deze code effectief door te nemen met de Visual Studio-debugger, tenzij u source maps 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. (Mogelijk draaien er browserextensies die de volledige foutopsporingsmodus onderbreken, dus u moet misschien Taakbeheer openen om onverwachte instantiaties 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. Zie de Releaseopmerkingenvoor meer informatie.

   

   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

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

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.

Bronkaarten 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, klikt u met de rechtermuisknop op uw project in "Solution Explorer" en kiest u 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: de bron naast de brontoewijzingen binnen één bestand verzenden; vereist dat inlineSourceMap- of sourceMap- moet worden 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)

Verwante inhoud

Eigenschappen, React, Angular, Vue