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.

Configureren van foutopsporing

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. Raadpleeg Skipping Uninteresting Code en Launch configuratie-attributenvoor meer informatie over skipFiles en andere configuratieopties voor de debugger.

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.

• Als u fouten wilt opsporen in een script aan de clientzijde in ASP.NET-apps, opent u het deelvensterExtra-opties> en vouwt u de sectie Alle instellingen>voor foutopsporing>algemeen uit. Selecteer de optie JavaScript-foutopsporing inschakelen voor ASP.NET (Chrome en Edge).

  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.

• Voor .esproj-projecten in Visual Studio 2022 kunt u fouten opsporen in script aan de clientzijde met behulp van standaardmethoden voor foutopsporing om onderbrekingspunten te bereiken. Als u foutopsporing wilt configureren, kunt u launch.json instellingen wijzigen, die hetzelfde werken als in VS Code. Zie Start configuratiekenmerken voor meer informatie over configuratieopties voor debuggers.

Note

Voor ASP.NET en ASP.NET Core wordt het opsporen 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 geminimificeerd 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 activeren 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.

De browser handmatig configureren voor foutopsporing

In Visual Studio 2022 is de procedure die in deze sectie wordt beschreven, alleen beschikbaar in ASP.NET en ASP.NET Core-toepassingen. Dit is alleen vereist in ongebruikelijke scenario's waarin u browserinstellingen moet aanpassen. In .esproj-projecten is de browser standaard geconfigureerd 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 worden uitgevoerd en de volledige debug-mode onderscheppen, dus wellicht moet u Taakbeheer openen om onverwachte instances van Chrome of Edge te zoeken en te beëindigen.)

   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

   or,

   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

In sommige scenario's moet u het foutopsporingsprogramma mogelijk koppelen aan een actieve app.

Als u het foutopsporingsprogramma vanuit Visual Studio wilt koppelen en onderbrekingspunten wilt raken in de code aan de clientzijde, moet u hulp nodig hebben 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).

   Om aan de clientzijde een onderbrekingspunt te bereiken in een TypeScript-bestand, .vueof JSX- bestand, is doorgaans het gebruik van sourcemapsvereist. Een bronkaart moet correct worden geconfigureerd ter ondersteuning van foutopsporing in Visual Studio.

3. Kies Foutopsporing>Koppelen aan Proces.

   Tip

   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 foutopsporingsdoel, zoals http://localhost:9222, moet worden weergegeven in het -verbindingsdoelveld.

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

   De poort (bijvoorbeeld 7184) kan ook worden weergegeven in het veld Titel, zodat u het juiste browserexemplaar kunt selecteren.

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

   

   Tip

   Als de debugger niet aan wordt verbonden, dan ziet u het bericht 'Kan debuggeradapter 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 de volledige foutopsporingsmodus verhinderen.

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

   Terwijl u gepauzeerd bent in de debugger, kunt u de status van uw app onderzoeken door de muisaanwijzer op variabelen te bewegen en de vensters van de debugger te gebruiken. U kunt de debugger verder brengen door door de code te stappen (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 de 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 Bronkaarten van de VS Code-documentatie.

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

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 onderbrekingspunten. Zie Hulpprogramma's voor foutopsporing gebruiken in Visual Studiovoor meer informatie.

Verwante inhoud

Eigenschappen, React, Angular, Vue