Felsöka en JavaScript- eller TypeScript-app i Visual Studio

Du kan felsöka JavaScript- och TypeScript-kod med hjälp av Visual Studio. Du kan träffa brytpunkter, koppla felsökningsprogrammet, inspektera variabler, visa anropsstacken och använda andra felsökningsfunktioner.

Felsöka skript på serversidan

1. Med ditt projekt öppet i Visual Studio, öppna en server-sides JavaScript-fil (till exempel server.js), klicka i marginalen för att ställa in en brytpunkt:

   

   Brytpunkter är den mest grundläggande och viktiga funktionen för tillförlitlig felsökning. En brytpunkt anger var Visual Studio ska pausa koden som körs, så att du kan titta på värdena för variabler eller minnesbeteendet, eller om en kodgren körs eller inte.

2. Kör appen genom att trycka på F5 (Felsöka>Starta felsökning).

   Felsökningsprogrammet pausar vid brytpunkten du anger (IDE markerar instruktionen i den gula bakgrunden). Nu kan du inspektera apptillståndet genom att hovra över variabler som för närvarande finns i omfånget med hjälp av felsökningsfönster som Locals och Watch windows.

   

3. Fortsätt appen genom att trycka på F5.

4. Om du vill använda Chrome Developer Tools trycker du på F12 i Webbläsaren Chrome. Med hjälp av dessa verktyg kan du undersöka DOM eller interagera med appen med hjälp av JavaScript-konsolen.

Felsöka skript på klientsidan

Visual Studio tillhandahåller felsökningsstöd på klientsidan endast för Chrome och Microsoft Edge. I vissa scenarier träffar felsökningsprogrammet automatiskt brytpunkter i JavaScript- och TypeScript-kod och inbäddade skript i HTML-filer.

• Om du vill felsöka skript på klientsidan i ASP.NET appar väljer du Verktyg>Alternativ>Felsökningoch väljer sedan Aktivera JavaScript-felsökning för ASP.NET (Chrome, Edge och IE).

  Om du föredrar att använda Chrome Developer Tools eller F12 Tools för Microsoft Edge för att felsöka skript på klientsidan bör du inaktivera den här inställningen.

  Mer detaljerad information finns i det här blogginlägget för Google Chrome. Information om felsökning av TypeScript i ASP.NET Core finns i Lägg till TypeScript i en befintlig ASP.NET Core-app.

• Följ stegen som beskrivs i den här artikeln för Node.js program och andra JavaScript-projekt.

Förbereda appen för felsökning

Om källan har minifierats eller skapats av en transpiler som TypeScript eller Babel använder du källkartor för bästa felsökning. Du kan till och med koppla felsökningsprogrammet till ett skript på klientsidan som körs utan källkartor. Du kanske dock bara kan ange och träffa brytpunkter i den minifierade eller transpilerade filen, inte i källfilen. I en Vue.js app skickas till exempel det minifierade skriptet som en sträng till en eval-instruktion, och det finns inget sätt att gå igenom den här koden effektivt med hjälp av Visual Studio-felsökningsprogrammet om du inte använder källkartor. För komplexa felsökningsscenarier kanske du vill använda Chrome Developer Tools eller F12 Tools för Microsoft Edge i stället.

Hjälp med att generera källkartor finns i Generera källkartor för felsökning.

Förbereda webbläsaren för felsökning

I det här scenariot använder du antingen Microsoft Edge eller Chrome.

1. Stäng alla fönster för målwebbläsaren, antingen Microsoft Edge- eller Chrome-instanser.

   Andra webbläsarinstanser kan förhindra att webbläsaren öppnas med felsökning aktiverat. (Webbläsartillägg kan köras och fånga upp fullständigt felsökningsläge, så du kan behöva öppna Aktivitetshanteraren för att hitta och stänga oväntade instanser av Chrome eller Edge.)

   För bästa resultat stänger du av alla instanser av Chrome, även om du arbetar med Microsoft Edge. Båda webbläsarna använder samma kromkodbas.

2. Starta webbläsaren med felsökning aktiverat.

   Från och med Visual Studio 2019 kan du ange flaggan --remote-debugging-port=9222 vid webbläsarstart genom att välja Bläddra med...> från verktygsfältet Debug.

   

   Om du inte ser kommandot Bläddra med... i verktygsfältet Debug väljer du en annan webbläsare och försöker sedan igen.

   I dialogrutan "Browse With" väljer du Lägg tilloch anger sedan flaggan i fältet Argument. Använd ett annat eget namn för webbläsaren, till exempel Edge-felsökningsläge eller Chrome-felsökningsläge. För mer information, se Versionsinformation.

   

   Välj Bläddra för att starta appen med webbläsaren i felsökningsläge.

   Du kan också öppna kommandot Kör från knappen Starta i Windows (högerklicka och välj Kör) och ange följande kommando:

   msedge --remote-debugging-port=9222

   eller

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

   Detta startar webbläsaren med felsökning aktiverat.

   Appen körs inte än, så du får en tom webbläsarsida. (Om du startar webbläsaren med kommandot Kör måste du klistra in rätt URL för din appinstans.)

Koppla felsökningsprogrammet till skriptet på klientsidan

Felsöka brytpunkter och källkartor

Om du behöver bryta in i kod i en TypeScript- eller JSX-källfil och inte kan göra det använder du Koppla till process- enligt beskrivningen i föregående avsnitt för att bifoga felsökningsprogrammet. Kontrollera att din miljö är korrekt konfigurerad:

• Stäng alla webbläsarinstanser, inklusive Chrome-tillägg (med hjälp av Aktivitetshanteraren), så att du kan köra webbläsaren i felsökningsläge.

• Se till att du startar webbläsaren i felsökningsläge.

• Kontrollera att källmappningsfilen innehåller rätt relativ sökväg till källfilen och att den inte innehåller prefix som inte stöds, till exempel webpack:///, vilket hindrar Visual Studio-felsökningsprogrammet från att hitta en källfil. En referens som webpack:///.app.tsx kan till exempel korrigeras till ./app.tsx. Du kan göra detta manuellt i källmappningsfilen (vilket är användbart för testning) eller via en anpassad byggkonfiguration. Mer information finns i Generera källkartor för felsökning av.

Om du behöver bryta in i kod i en källfil (till exempel app.tsx) och inte kan göra det kan du prova att använda debugger;-instruktionen i källfilen eller ange brytpunkter i Chrome Developer Tools (eller F12 Tools for Microsoft Edge) i stället.

Generera källkartor för felsökning

Visual Studio har möjlighet att använda och generera källkartor i JavaScript-källfiler. Detta krävs ofta om källan är minifierad eller skapad av en transpiler som TypeScript eller Babel. Vilka alternativ som är tillgängliga beror på projekttypen.

• Ett TypeScript-projekt i Visual Studio genererar källkartor åt dig som standard. Mer information finns i Konfigurera källkartor med hjälp av en tsconfig.json fil.

• I ett JavaScript-projekt kan du generera källkartor med en bundler som webpack och en kompilator som TypeScript-kompilatorn (eller Babel), som du kan lägga till i projektet. För TypeScript-kompilatorn måste du också lägga till en tsconfig.json fil och ange alternativet sourceMap kompilator. Ett exempel som visar hur du gör detta med hjälp av en grundläggande webpack-konfiguration finns i Skapa en Node.js-app med React.

Om du vill konfigurera avancerade inställningar för källkartor använder du antingen en tsconfig.json eller projektinställningarna i ett TypeScript-projekt, men inte båda.

Om du vill aktivera felsökning med Visual Studio måste du se till att referenserna till källfilen i den genererade källkartan är korrekta (detta kan kräva testning). Om du till exempel använder webpack innehåller referenser i källmappningsfilen webpack:///-prefixet, vilket hindrar Visual Studio från att hitta en TypeScript- eller JSX-källfil. När du korrigerar detta i felsökningssyfte måste referensen till källfilen (till exempel app.tsx) ändras från något som liknar webpack:///./app.tsx till något som ./app.tsx, vilket möjliggör felsökning (sökvägen är relativ till källfilen). I följande exempel visas hur du kan konfigurera källkartor i webpack, som är en av de vanligaste paketen, så att de fungerar med Visual Studio.

(Endast webpack) Om du ställer in brytpunkten i en TypeScript av JSX-fil (i stället för en transpilerad JavaScript-fil) måste du uppdatera webpack-konfigurationen. I webpack-config.jskan du till exempel behöva ersätta följande kod:

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

med den här koden:

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

Det här är en inställning endast för utveckling för att aktivera felsökning av kod på klientsidan i Visual Studio.

För komplicerade scenarier fungerar webbläsarverktygen (F12) ibland bäst för felsökning, eftersom de inte kräver ändringar i anpassade prefix.

Konfigurera källkartor med hjälp av en tsconfig.json fil

Om du lägger till en tsconfig.json fil i projektet behandlar Visual Studio katalogroten som ett TypeScript-projekt. Om du vill lägga till filen högerklickar du på projektet i Solution Explorer och väljer sedan Lägg till > nytt objekt > TypeScript JSON-konfigurationsfil. En tsconfig.json fil som följande läggs till i projektet.

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

Kompilatoralternativ för tsconfig.json fil

• inlineSourceMap: Generera en enda fil med källkartor i stället för att skapa en separat källkarta för varje källfil.
• inlineSources: Generera källan tillsammans med källkartorna i en enda fil; kräver att inlineSourceMap- eller sourceMap- anges.
• mapRoot: Anger platsen där felsökaren ska hitta källmappningsfiler (.map) i stället för standardplatsen. Använd den här flaggan om körningsfilerna .map måste finnas på en annan plats än de .js filerna. Den angivna platsen är inbäddad i källkartan för att dirigera felsökningsprogrammet till platsen för .map-filerna.
• sourceMap: Genererar en motsvarande .map fil.
• sourceRoot: Anger platsen där felsökaren ska hitta TypeScript-filer i stället för källplatserna. Använd den här flaggan om körkällorna behöver vara på en annan plats än under designtiden. Den angivna platsen är inbäddad i källkartan för att dirigera felsökningsprogrammet till platsen där källfilerna finns.

Mer information om kompileringsalternativen finns på sidan Kompilatoralternativ i TypeScript-handboken.

Felsöka JavaScript i dynamiska filer med hjälp av Razor (ASP.NET)

Relaterat innehåll

Egenskaper, React, Angular, Vue