Ladění javascriptové nebo typescriptové aplikace v sadě Visual Studio

Kód JavaScriptu a TypeScriptu můžete ladit pomocí sady Visual Studio. Můžete zasáhnout zarážky, připojit debugger, zkontrolovat proměnné, zobrazit volací zásobník a používat další funkce ladění.

Tip

Pokud jste ještě nenainstalovali Visual Studio, přejděte na stránku downloadů sady Visual Studio a nainstalujte ji zdarma.

Konfigurace ladění

V případě projektů .esproj v sadě Visual Studio 2022 používá Visual Studio Code soubor typu launch.json pro konfiguraci a přizpůsobení debuggeru. launch.json je konfigurační soubor ladicího programu.

Visual Studio připojí ladicí program pouze k uživatelskému kódu. V projektech .esproj můžete v sadě Visual Studio nakonfigurovat uživatelský kód (označovaný také jako nastavení Jen můj kód ) pomocí skipFiles nastavení v launch.json. To funguje stejně jako nastavení launch.json v editoru VS Code. Další informace o skipFiles a dalších možnostech konfigurace ladicího programu naleznete v tématu Vynechání nezainterestujícího kódu a spuštění atributů konfigurace.

Ladění skriptu na straně serveru

1. Když máte projekt otevřený ve Visual Studiu, otevřete soubor JavaScriptu na straně serveru (například server.js), kliknutím do okraje nastavte zarážku.

   

   Lámací body jsou základní a nejzásadnější funkcí spolehlivého ladění. Zarážka označuje, kde má Visual Studio pozastavit spuštěný kód, abyste se mohli podívat na hodnoty proměnných nebo chování paměti nebo jestli se spouští větev kódu.

2. Aplikaci spustíte stisknutím klávesy F5(>Spustit ladění).

   Ladicí program se pozastaví na bodu přerušení, který jste nastavili (vývojové prostředí [IDE] zvýrazní příkaz na žlutém pozadí). Teď můžete zkontrolovat stav aplikace tak, že najedete myší na proměnné, které jsou aktuálně dostupné, a použijete okna ladicího programu, jako jsou okno Místní hodnoty a Okno Hodinky.

   

3. Stisknutím klávesy F5 pokračujte v aplikaci.

4. Pokud chcete používat Vývojářské nástroje pro Chrome, stiskněte v prohlížeči Chrome klávesu F12 . Pomocí těchto nástrojů můžete prozkoumat DOM nebo interagovat s aplikací pomocí JavaScriptové konzole.

Ladění skriptu na straně klienta

Visual Studio poskytuje podporu ladění na straně klienta pouze pro Chrome a Microsoft Edge. V některých scénářích ladicí program automaticky narazí na zarážky v JavaScriptu a typeScriptu a vložené skripty v souborech HTML.

• Pro ladění skriptu na straně klienta v aplikacích ASP.NET otevřete podoknoNástroje>Možnosti a rozbalte částVšechna nastavení>Ladění>Obecné. Vyberte možnost Povolit ladění JavaScriptu pro ASP.NET (Chrome a Edge).

  Pokud chcete k ladění skriptů na straně klienta použít Vývojářské nástroje pro Chrome nebo F12 Tools for Microsoft Edge, měli byste toto nastavení zakázat.

  Podrobnější informace najdete v tomto blogovém příspěvku pro Google Chrome. Ladění TypeScriptu v ASP.NET Core najdete v tématu Přidání TypeScriptu do existující aplikace ASP.NET Core.

• U projektů .esproj ve Visual Studiu 2022 můžete ladit skript na straně klienta pomocí standardních metod ladění, abyste dosáhli bodů přerušení. Pokud chcete nakonfigurovat ladění, můžete upravit nastavení launch.json, která fungují stejně jako ve VS Code. Další informace o možnostech konfigurace ladicího programu naleznete v tématu Spouštěcí atributy konfigurace.

Note

Pro ASP.NET a ASP.NET Core není ladění vložených skriptů v .CSHTML souborech podporováno. Kód JavaScriptu musí být v samostatných souborech, aby bylo možné povolit ladění.

Příprava aplikace na ladění

Pokud je zdroj minifikovaný nebo vytvořený transpilátorem, jako je TypeScript nebo Babel, použijte zdrojové mapy pro nejlepší možnosti ladění. Ladicí program můžete dokonce připojit k běžícímu klientskému skriptu bez zdrojových map. Možná ale budete moct nastavit zarážky jenom v minifikovaném nebo transpilovaného souboru, ne ve zdrojovém souboru. Například v aplikaci Vue.js se minifikovaný skript předá jako řetězec příkazu eval a neexistuje způsob, jak tento kód efektivně procházet pomocí ladicího programu sady Visual Studio, pokud nepoužíváte zdrojové mapy. V případě složitých scénářů ladění můžete místo toho chtít použít Vývojářské nástroje pro Chrome nebo F12 Tools for Microsoft Edge.

Manuální nastavení prohlížeče pro ladění

V sadě Visual Studio 2022 je postup popsaný v této části k dispozici pouze v aplikacích ASP.NET a ASP.NET Core. Vyžaduje se pouze v neobvyklých scénářích, kdy potřebujete přizpůsobit nastavení prohlížeče. V projektech .esproj je prohlížeč standardně nakonfigurovaný pro ladění.

V tomto scénáři použijte Microsoft Edge nebo Chrome.

1. Zavřete všechna okna pro cílový prohlížeč, a to buď instance Microsoft Edge, nebo Chrome.

   Ostatní instance prohlížeče mohou zabránit tomu, aby se prohlížeč otevřel s zapnutým laděním. (Rozšíření prohlížeče mohou běžet a zasahují do ladění, takže možná budete muset otevřít Správce úloh, abyste našli a zavřeli neočekávané instance prohlížečů Chrome nebo Edge.)

   Pro dosažení nejlepších výsledků ukončete všechny instance Chromu, i když pracujete s Microsoft Edge. Oba prohlížeče používají stejný základ kódu chromu.

2. Spusťte prohlížeč v režimu ladění.

   Od Visual Studio 2019 můžete při spuštění prohlížeče nastavit příznak --remote-debugging-port=9222 zvolením Procházet...> z panelu nástrojů Ladění.

   

   Pokud na panelu nástrojů Ladění nevidíte příkaz Procházet s..., vyberte jiný prohlížeč a zkuste to znovu.

   V dialogovém okně Procházet zvolte Přidat a potom nastavte příznak v poli Argumenty . Pro prohlížeč použijte jiný popisný název, například režim ladění Edge nebo Režim ladění Chrome. Podrobnosti najdete v poznámkách k verzi.

   

   Vyberte Procházet a spusťte aplikaci v prohlížeči v režimu ladění.

   Případně otevřete příkaz Spustit z tlačítka Start systému Windows (klikněte pravým tlačítkem myši a zvolte Spustit) a zadejte následující příkaz:

   msedge --remote-debugging-port=9222

   or,

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

   Spustí se váš prohlížeč s povoleným režimem ladění.

   Aplikace ještě není spuštěná, takže získáte prázdnou stránku prohlížeče. (Pokud spustíte prohlížeč pomocí příkazu Spustit, musíte vložit správnou adresu URL instance aplikace.)

Připojení ladicího programu ke skriptu na straně klienta

V některých scénářích může být potřeba připojit ladicí program ke spuštěné aplikaci.

Pro připojení debuggeru ze sady Visual Studio a dosažení bodů přerušení v kódu na straně klienta je zapotřebí pomoc při identifikaci správného procesu. Tady je jeden způsob, jak ho povolit.

1. Ujistěte se, že je vaše aplikace spuštěná v prohlížeči v režimu ladění, jak je popsáno v předchozí části.

   Pokud jste vytvořili konfiguraci prohlížeče s popisným názvem, zvolte ji jako cíl ladění a stisknutím kláves Ctrl+F5 (Ladit>spustit bez ladění) spusťte aplikaci v prohlížeči.

2. Přejděte do sady Visual Studio a nastavte zarážku ve zdrojovém kódu, což může být javascriptový soubor, soubor TypeScript nebo soubor JSX. (Nastavte zarážku na řádku kódu, který umožňuje zarážky, například návratový příkaz nebo deklaraci var.)

   

   Pokud chcete najít konkrétní kód v transpilovaném souboru, použijte Ctrl+F (Upravit>Najít a nahradit>Rychlé hledání).

   Pro kód na straně klienta je k tomu, abyste mohli v souboru TypeScript, .vue nebo JSX dosáhnout zarážky, obvykle nutné použít zdrojové mapy. Zdrojová mapa musí být správně nakonfigurována, aby umožňovala ladění v prostředí Visual Studio.

3. Vyberte Ladění>Připojit k procesu.

   Tip

   Počínaje sadou Visual Studio 2017 můžete po prvním připojení k procesu podle následujících kroků rychle znovu připojit ke stejnému procesu tak, že zvolíte ladění>Znovu připojit k procesu.

4. V dialogovém okně Připojit k procesu jako typ připojení vyberte JavaScript a TypeScript (Chrome Dev Tools/V8 Inspector).

   Cíl ladicího programu, například http://localhost:9222, by se měl zobrazit v poli Cíl připojení .

5. V seznamu instancí prohlížeče vyberte proces prohlížeče se správným portem hostitele (https://localhost:7184/ v tomto příkladu) a vyberte Připojit.

   Port (například 7184) se může zobrazit také v poli Název , aby vám pomohl vybrat správnou instanci prohlížeče.

   Následující příklad ukazuje, jak to vypadá v prohlížeči Microsoft Edge.

   

   Tip

   Pokud se ladicí program nepřipojí a zobrazí se zpráva "Nepodařilo se spustit ladicí adaptér" nebo "Nelze se připojit k procesu." Operace není v aktuálním stavu legální.", pomocí Správce úloh systému Windows zavřete všechny instance cílového prohlížeče před spuštěním prohlížeče v režimu ladění. Rozšíření prohlížeče mohou být spuštěná a tím brání úplnému režimu ladění.

6. Kód se zarážkou už mohl být spuštěný, aktualizujte stránku prohlížeče. V případě potřeby podnikněte kroky, které způsobí spuštění kódu se zarážkou.

   Když je ladicí program pozastavený, můžete stav aplikace prozkoumat tak, že najedete myší na proměnné a použijete okna ladicího programu. Ladicí program můžete procházet krokováním kódu (F5, F10 a F11). Další informace o základních funkcích ladění naleznete v tématu Nejprve se podívejte na ladicí program.

   Zarážku můžete nastavit buď v transpilovaném .js souboru, nebo ve zdrojovém souboru, v závislosti na typu vaší aplikace, podle toho, jaké kroky jste již provedli, a dalších faktorech, jako je stav prohlížeče. V obou směrech můžete procházet kód a zkoumat proměnné.

   • Pokud potřebujete rozdělit kód do typescriptu, JSX nebo .vue zdrojového souboru a nemůžete to udělat, ujistěte se, že je vaše prostředí správně nastavené, jak je popsáno v části Zdrojové mapy v dokumentaci nástroje VS Code.

   • Pokud potřebujete rozdělit kód do transpilovaného souboru JavaScriptu (například app-bundle.js) a nemůžete to udělat, odeberte zdrojový soubor mapy filename.js.map.

Ladění JavaScriptu v dynamických souborech pomocí Razoru (ASP.NET)

V sadě Visual Studio 2022 můžete ladit stránky Razor Pages pomocí bodů přerušení. Další informace naleznete v tématu Použití nástrojů ladění v sadě Visual Studio.

Související obsah

vlastnosti, React, Angular, Vue