Debugowanie aplikacji JavaScript lub TypeScript w programie Visual Studio

Możesz debugować kod JavaScript i TypeScript przy użyciu programu Visual Studio. Możesz trafić w punkty przerwania, dołączyć debuger, sprawdzić zmienne, wyświetlić stos wywołań i użyć innych funkcji debugowania.

Napiwek

Jeśli program Visual Studio nie został jeszcze zainstalowany, przejdź do strony pobierania programu Visual Studio, aby zainstalować ją bezpłatnie. Jeśli tworzysz aplikacje Node.js, musisz zainstalować obciążenie programistyczne Node.js za pomocą programu Visual Studio.

Debugowanie skryptu po stronie serwera

1. Po otwarciu projektu w programie Visual Studio otwórz plik JavaScript po stronie serwera (na przykład server.js), kliknij w wypowiedzi, aby ustawić punkt przerwania:

   

   Punkty przerwania to najbardziej podstawowa i kluczowa funkcja wiarygodnego debugowania. Punkt przerwania wskazuje, gdzie program Visual Studio powinien zawiesić uruchomiony kod, aby można było przyjrzeć się wartościom zmiennych lub zachowaniu pamięci, czy też nie, czy jest uruchamiana gałąź kodu.

2. Aby uruchomić aplikację, naciśnij klawisz F5 (Debuguj>rozpocznij debugowanie debugowania).

   Debuger wstrzymuje się w ustawionym punkcie przerwania (środowisko IDE wyróżnia instrukcję w żółtym tle). Teraz możesz sprawdzić stan aplikacji, umieszczając wskaźnik myszy na zmiennych aktualnie w zakresie przy użyciu okien debugera, takich jak okna Lokalne i Watch .

   

3. Naciśnij klawisz F5 , aby kontynuować aplikację.

4. Jeśli chcesz użyć narzędzi dla deweloperów programu Chrome, naciśnij klawisz F12 w przeglądarce Chrome. Za pomocą tych narzędzi możesz sprawdzić dom lub wchodzić w interakcję z aplikacją przy użyciu konsoli języka JavaScript.

Debugowanie skryptu po stronie klienta

Program Visual Studio zapewnia obsługę debugowania po stronie klienta tylko dla przeglądarek Chrome i Microsoft Edge (Chromium). W niektórych scenariuszach debuger automatycznie osiąga punkty przerwania w kodach JavaScript i TypeScript oraz skryptach osadzonych w plikach HTML.

• Aby debugowania skryptu po stronie klienta w aplikacjach ASP.NET, wybierz pozycję Narzędzia>Opcje>debugowania, a następnie wybierz pozycję Włącz debugowanie języka JavaScript dla ASP.NET (Chrome, Edge i IE).

  Aby uzyskać bardziej szczegółowe informacje, zobacz wpis w blogu Debug JavaScript in Microsoft Edge (Debugowanie języka JavaScript w przeglądarce Microsoft Edge ) i ten wpis dla przeglądarki Google Chrome. Aby uzyskać informacje na temat debugowania języka TypeScript w programie ASP.NET Core, zobacz Dodawanie języka TypeScript do istniejącej aplikacji ASP.NET Core.

• W przypadku Node.js aplikacji i innych projektów JavaScript wykonaj kroki opisane tutaj.

Uwaga

W przypadku ASP.NET i ASP.NET Core debugowanie skryptów osadzonych w programie . Pliki CSHTML nie są obsługiwane. Aby umożliwić debugowanie, kod JavaScript musi znajdować się w oddzielnych plikach.

Przygotowywanie aplikacji do debugowania

Jeśli źródło jest minyfikowane lub tworzone przez transpiler, taki jak TypeScript lub Babel, użyj map źródłowych, aby uzyskać najlepsze środowisko debugowania. Debuger można nawet dołączyć do uruchomionego skryptu po stronie klienta bez map źródłowych. Można jednak ustawić i trafić tylko do punktów przerwania w pliku minyfikowanym lub transpilowym, a nie w pliku źródłowym. Na przykład w aplikacji Vue.js skrypt zmigrowany jest przekazywany jako ciąg do eval instrukcji i nie ma możliwości skutecznego przechodzenia przez ten kod przy użyciu debugera programu Visual Studio, chyba że używasz map źródłowych. W przypadku złożonych scenariuszy debugowania możesz zamiast tego użyć narzędzi dla deweloperów przeglądarki Chrome lub narzędzi F12 dla przeglądarki Microsoft Edge.

Aby uzyskać pomoc dotyczącą generowania map źródłowych, zobacz Generowanie map źródłowych na potrzeby debugowania.

Przygotowywanie przeglądarki do debugowania

W tym scenariuszu użyj przeglądarki Microsoft Edge (Chromium) lub Chrome.

1. Zamknij wszystkie okna przeglądarki docelowej.

   Inne wystąpienia przeglądarki mogą uniemożliwić otwieranie przeglądarki z włączonym debugowaniem. (Rozszerzenia przeglądarki mogą być uruchomione i przechwytywać tryb pełnego debugowania, więc może być konieczne otwarcie Menedżera zadań, aby znaleźć i zamknąć nieoczekiwane wystąpienia programu Chrome).

   Aby uzyskać najlepsze wyniki, zamknij wszystkie wystąpienia przeglądarki Chrome, nawet jeśli pracujesz z przeglądarką Microsoft Edge (Chromium). Obie przeglądarki używają tej samej bazy kodu chromium.

2. Uruchom przeglądarkę z włączonym debugowaniem.

   Począwszy od programu Visual Studio 2019, możesz ustawić flagę --remote-debugging-port=9222 podczas uruchamiania przeglądarki, wybierając pozycję Przeglądaj za pomocą...> na pasku narzędzi Debugowanie.

   

   Jeśli nie widzisz polecenia Przeglądaj za pomocą... na pasku narzędzi Debugowanie , wybierz inną przeglądarkę, a następnie ponów próbę.

   W oknie dialogowym Przeglądaj za pomocą wybierz pozycję Dodaj, a następnie ustaw flagę w polu Argumenty . Użyj innej przyjaznej nazwy przeglądarki, takiej jak Przeglądarka Edge z debugowaniem lub Chrome z debugowaniem. Aby uzyskać szczegółowe informacje, zobacz Informacje o wersji.

   

   Alternatywnie otwórz polecenie Uruchom z przycisku Start systemu Windows (kliknij prawym przyciskiem myszy i wybierz polecenie Uruchom), a następnie wprowadź następujące polecenie:

   msedge --remote-debugging-port=9222

   Lub

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

   Spowoduje to uruchomienie przeglądarki z włączonym debugowaniem.

   Aplikacja nie jest jeszcze uruchomiona, więc zostanie wyświetlona pusta strona przeglądarki.

Dołączanie debugera do skryptu po stronie klienta

Aby dołączyć debuger z programu Visual Studio i trafić do punktów przerwania w kodzie po stronie klienta, potrzebuje pomocy przy identyfikowaniu prawidłowego procesu. Oto jeden ze sposobów jej włączenia.

1. Przejdź do programu Visual Studio, a następnie ustaw punkt przerwania w kodzie źródłowym, który może być plikiem JavaScript, plikiem TypeScript lub plikiem JSX. (Ustaw punkt przerwania w wierszu kodu, który zezwala na punkty przerwania, takie jak instrukcja return lub deklaracja var).

   

   Aby znaleźć konkretny kod w transpilowanych plikach, użyj klawiszy Ctrl+F (Edytuj>znajdź i zastąp>szybkie wyszukiwanie).

   W przypadku kodu po stronie klienta, aby trafić do punktu przerwania w pliku TypeScript, pliku vue lub JSX, zwykle wymaga użycia map źródłowych. Mapa źródłowa musi być poprawnie skonfigurowana do obsługi debugowania w programie Visual Studio.

2. Wybierz przeglądarkę docelową jako element docelowy debugowania w programie Visual Studio, a następnie naciśnij klawisze Ctrl+F5 (Uruchom debugowanie>bez debugowania), aby uruchomić aplikację w przeglądarce.

   Jeśli utworzono konfigurację przeglądarki z przyjazną nazwą, wybierz ją jako element docelowy debugowania. Aplikacja zostanie otwarta na nowej karcie przeglądarki.

3. Wybierz pozycję Debuguj>dołączanie do procesu.

   Napiwek

   Począwszy od programu Visual Studio 2017, po dołączeniu do procesu po raz pierwszy, wykonując te kroki, możesz szybko ponownie dołączyć do tego samego procesu, wybierając pozycję Debuguj>ponownie dołącz do procesu.

4. W oknie dialogowym Dołączanie do procesu pobierz odfiltrowaną listę wystąpień przeglądarki, do których można dołączyć. Wybierz prawidłowy debuger dla przeglądarki docelowej, JavaScript (Chrome) lub JavaScript (Microsoft Edge — Chromium) w polu Dołącz do , wpisz chrome lub edge w polu filtru, aby filtrować wyniki wyszukiwania.

5. Wybierz proces przeglądarki z poprawnym portem hosta (localhost w tym przykładzie), a następnie wybierz pozycję Dołącz.

   Port (na przykład 1337) może być również wyświetlany w polu Tytuł , aby ułatwić wybranie poprawnego wystąpienia przeglądarki.

   W poniższym przykładzie pokazano, jak wygląda przeglądarka Microsoft Edge (Chromium).

   

   Napiwek

   Jeśli debuger nie jest dołączony i zostanie wyświetlony komunikat "Nie można uruchomić karty debugowania" lub "Nie można dołączyć do procesu. Operacja nie jest legalna w bieżącym stanie." Użyj Menedżera zadań systemu Windows, aby zamknąć wszystkie wystąpienia przeglądarki docelowej przed uruchomieniem przeglądarki w trybie debugowania. Rozszerzenia przeglądarki mogą być uruchomione i uniemożliwiać tryb pełnego debugowania.

6. Kod z punktem przerwania mógł już zostać wykonany, odśwież stronę przeglądarki. W razie potrzeby wykonaj akcję, aby spowodować wykonanie kodu z punktem przerwania.

   W trakcie wstrzymania w debugerze możesz sprawdzić stan aplikacji, umieszczając kursor na zmiennych i używając okien debugera. Debuger można przejść przez przejście przez kod (F5, F10 i F11). Aby uzyskać więcej informacji na temat podstawowych funkcji debugowania, zobacz Pierwsze spojrzenie na debuger.

   Punkt przerwania może znajdować się w transpilowanych .js plikach lub plikach źródłowych, w zależności od typu aplikacji, kroków, które zostały wcześniej wykonywane, oraz innych czynników, takich jak stan przeglądarki. Tak czy inaczej, możesz przejść przez kod i zbadać zmienne.

   • Jeśli musisz podzielić kod w pliku TypeScript, JSX lub .vue źródłowym i nie możesz tego zrobić, upewnij się, że środowisko zostało poprawnie skonfigurowane zgodnie z opisem w sekcji Rozwiązywanie problemów.

   • Jeśli musisz podzielić kod w transpilowany plik JavaScript (na przykład app-bundle.js) i nie można go zrobić, usuń plik mapy źródłowej filename.js.map.

Rozwiązywanie problemów z punktami przerwania i mapami źródłowymi

Jeśli musisz podzielić kod w pliku źródłowym TypeScript lub JSX i nie możesz tego zrobić, użyj polecenia Dołącz do procesu zgodnie z opisem w poprzedniej sekcji, aby dołączyć debuger. Upewnij się, że środowisko zostało poprawnie skonfigurowane:

• Zamknij wszystkie wystąpienia przeglądarki, w tym rozszerzenia przeglądarki Chrome (przy użyciu Menedżera zadań), aby można było uruchomić przeglądarkę w trybie debugowania.

• Upewnij się, że przeglądarka jest uruchamiana w trybie debugowania.

• Upewnij się, że plik mapy źródłowej zawiera poprawną ścieżkę względną do pliku źródłowego i że nie zawiera on nieobsługiwanych prefiksów, takich jak webpack:///, co uniemożliwia debugerowi programu Visual Studio lokalizowanie pliku źródłowego. Na przykład odwołanie, takie jak webpack:///.app.tsx , może zostać poprawione do pliku ./app.tsx. Można to zrobić ręcznie w pliku mapy źródłowej (co jest przydatne do testowania) lub za pomocą niestandardowej konfiguracji kompilacji. Aby uzyskać więcej informacji, zobacz Generowanie map źródłowych na potrzeby debugowania.

Alternatywnie, jeśli musisz podzielić kod w pliku źródłowym (na przykład app.tsx) i nie możesz tego zrobić, spróbuj użyć debugger; instrukcji w pliku źródłowym lub ustawić punkty przerwania w narzędziach dla deweloperów programu Chrome (lub F12 Tools for Microsoft Edge).

Generowanie map źródłowych na potrzeby debugowania

Program Visual Studio ma możliwość używania i generowania map źródłowych w plikach źródłowych języka JavaScript. Jest to często wymagane, jeśli źródło jest minyfikowane lub tworzone przez transpiler, taki jak TypeScript lub Babel. Dostępne opcje zależą od typu projektu.

• Projekt TypeScript w programie Visual Studio domyślnie generuje mapy źródłowe. Aby uzyskać więcej informacji, zobacz Konfigurowanie map źródłowych przy użyciu pliku tsconfig.json.

• W projekcie Języka JavaScript można generować mapy źródłowe przy użyciu pakietu, takiego jak webpack i kompilator, taki jak kompilator TypeScript (lub Babel), który można dodać do projektu. W przypadku kompilatora TypeScript należy również dodać tsconfig.json plik i ustawić opcję kompilatora sourceMap . Przykład pokazujący, jak to zrobić przy użyciu podstawowej konfiguracji pakietu webpack, zobacz Tworzenie aplikacji Node.js za pomocą platformy React.

Uwaga

Jeśli dopiero zaczynasz korzystać z map źródłowych, przeczytaj artykuł Co to jest Mapy źródłowa? przed kontynuowaniem.

Aby skonfigurować zaawansowane ustawienia map źródłowych, użyj tsconfig.json ustawień projektu lub w projekcie TypeScript, ale nie obu tych elementów.

Aby włączyć debugowanie przy użyciu programu Visual Studio, upewnij się, że odwołania do pliku źródłowego w wygenerowanej mapie źródłowej są poprawne (może to wymagać testowania). Jeśli na przykład używasz pakietu webpack, odwołania w pliku mapy źródłowej zawierają prefiks webpack:/// , co uniemożliwia programowi Visual Studio znalezienie pliku źródłowego TypeScript lub JSX. W szczególności, jeśli poprawisz to w celach debugowania, odwołanie do pliku źródłowego (takiego jak app.tsx), należy zmienić z czegoś takiego jak webpack:///./app.tsx na coś takiego jak ./app.tsx, co umożliwia debugowanie (ścieżka jest względna względem pliku źródłowego). W poniższym przykładzie pokazano, jak można skonfigurować mapy źródłowe w pakiecie webpack, który jest jednym z najbardziej typowych pakietów, dzięki czemu współpracują z programem Visual Studio.

(tylko pakiet webpack) Jeśli ustawiasz punkt przerwania w kodzie TypeScript pliku JSX (zamiast transpilowanego pliku JavaScript), musisz zaktualizować konfigurację pakietu webpack. Na przykład w webpack-config.js może być konieczne zastąpienie następującego kodu:

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

następującym:

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

Jest to ustawienie tylko programistyczne umożliwiające debugowanie kodu po stronie klienta w programie Visual Studio.

W przypadku skomplikowanych scenariuszy narzędzia przeglądarki (F12) czasami najlepiej sprawdzają się podczas debugowania, ponieważ nie wymagają one zmian w niestandardowych prefiksach.

Konfigurowanie map źródłowych przy użyciu pliku tsconfig.json

Jeśli dodasz tsconfig.json plik do projektu, program Visual Studio traktuje katalog główny jako projekt TypeScript. Aby dodać plik, kliknij prawym przyciskiem myszy projekt w Eksplorator rozwiązań, a następnie wybierz polecenie Dodaj > nowy typ elementuScript > plik konfiguracji JSON. Plik tsconfig.json podobny do poniższego zostanie dodany do projektu.

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

Opcje kompilatora dla pliku tsconfig.json

• inlineSourceMap: emituj pojedynczy plik z mapami źródłowymi zamiast tworzyć oddzielną mapę źródłową dla każdego pliku źródłowego.
• inlineSources: Emituj źródło wraz z mapami źródłowymi w jednym pliku; wymaga ustawienia inlineSourceMap lub sourceMap .
• mapRoot: określa lokalizację, w której debuger powinien znajdować pliki mapy źródłowej (.map) zamiast lokalizacji domyślnej. Użyj tej flagi, jeśli pliki czasu .map wykonywania muszą znajdować się w innej lokalizacji niż .js pliki. Określona lokalizacja jest osadzona na mapie źródłowej w celu przekierowania debugera do lokalizacji .map plików.
• sourceMap: generuje odpowiedni .map plik.
• sourceRoot: określa lokalizację, w której debuger powinien znajdować pliki TypeScript zamiast lokalizacji źródłowych. Użyj tej flagi, jeśli źródła czasu wykonywania muszą znajdować się w innej lokalizacji niż lokalizacja w czasie projektowania. Określona lokalizacja jest osadzona na mapie źródłowej, aby skierować debuger do lokalizacji plików źródłowych.

Aby uzyskać więcej informacji na temat opcji kompilatora, zobacz stronę Opcje kompilatora w podręczniku TypeScript.

Konfigurowanie map źródłowych przy użyciu ustawień projektu (projekt TypeScript)

Ustawienia mapy źródłowej można również skonfigurować przy użyciu właściwości projektu, klikając projekt prawym przyciskiem myszy, a następnie wybierając polecenie Debugowanie kompilacji Języka > TypeScript właściwości > projektu>.

Te ustawienia projektu są dostępne.

• Generuj mapy źródłowe (równoważne mapom źródłowym w tsconfig.json): generuje odpowiedni .map plik.
• Określ katalog główny map źródłowych (odpowiednik mapRoot w tsconfig.json): określa lokalizację, w której debuger powinien znajdować pliki mapy zamiast wygenerowanych lokalizacji. Użyj tej flagi, jeśli pliki czasu .map wykonywania muszą znajdować się w innej lokalizacji niż .js pliki. Określona lokalizacja jest osadzona na mapie źródłowej, aby skierować debuger do lokalizacji plików mapy.
• Określ katalog główny plików TypeScript (odpowiednik sourceRoot w tsconfig.json): określa lokalizację, w której debuger powinien znajdować pliki TypeScript zamiast lokalizacji źródłowych. Użyj tej flagi, jeśli pliki źródłowe czasu wykonywania muszą znajdować się w innej lokalizacji niż lokalizacja w czasie projektowania. Określona lokalizacja jest osadzona na mapie źródłowej, aby skierować debuger do lokalizacji plików źródłowych.

Debugowanie kodu JavaScript w plikach dynamicznych przy użyciu środowiska Razor (ASP.NET)

Począwszy od programu Visual Studio 2019, program Visual Studio zapewnia obsługę debugowania tylko dla przeglądarek Chrome i Microsoft Edge (Chromium).

Nie można jednak automatycznie osiągać punktów przerwania dla plików generowanych przy użyciu składni Razor (cshtml, vbhtml). Istnieją dwa podejścia, których można użyć do debugowania tego rodzaju pliku:

• Umieść instrukcję debugger; , w której chcesz przerwać: ta instrukcja powoduje zatrzymanie wykonywania skryptu dynamicznego i natychmiastowe rozpoczęcie debugowania podczas jego tworzenia.

• Załaduj stronę i otwórz dokument dynamiczny w programie Visual Studio: musisz otworzyć plik dynamiczny podczas debugowania, ustawić punkt przerwania i odświeżyć stronę, aby ta metoda działała. W zależności od tego, czy używasz przeglądarki Chrome, czy przeglądarki Microsoft Edge (Chromium), znajdziesz plik przy użyciu jednej z następujących strategii:

  • W przeglądarce Chrome przejdź do Eksplorator rozwiązań > dokumentów > skryptów YourPageName.

    Uwaga

    W przypadku korzystania z programu Chrome może zostać wyświetlony komunikat "żadne źródło nie jest dostępne między tagami <skryptów> ". To jest ok, po prostu kontynuuj debugowanie.

  • W przypadku przeglądarki Microsoft Edge (Chromium) użyj tej samej procedury co Przeglądarka Chrome.

Aby uzyskać więcej informacji, zobacz Debugowanie po stronie klienta projektów ASP.NET w przeglądarce Google Chrome.

Powiązana zawartość

Właściwości, React, Angular, Vue