Samouczek: tworzenie aplikacji Node.js i React w programie Visual Studio

Za pomocą programu Visual Studio można łatwo utworzyć projekt Node.js i korzystać z funkcji IntelliSense i innych wbudowanych funkcji, które obsługują bibliotekę Node.js. W tym samouczku utworzysz projekt aplikacji internetowej Node.js na podstawie szablonu programu Visual Studio. Następnie utworzysz prostą aplikację przy użyciu platformy React.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

• Tworzenie projektu z użyciem narzędzia Node.js
• Dodawanie pakietów npm
• Dodawanie kodu React do aplikacji
• Transpilowanie JSX
• Dołączanie debugera

Ważne

Począwszy od programu Visual Studio 2022, możesz też utworzyć projekt React przy użyciu zalecanego typu projektu opartego na interfejsie wiersza polecenia. Niektóre informacje zawarte w tym artykule dotyczą tylko typu projektu Node.js (.njsproj). Szablon używany w tym artykule nie jest już dostępny, począwszy od programu Visual Studio 2022 w wersji 17.8 (wersja zapoznawcza 2).

Przed rozpoczęciem zapoznaj się z szybkimi często zadawanymi pytaniami, aby przedstawić kilka kluczowych pojęć:

• Co to jest Node.js?

  Node.js to środowisko uruchomieniowe JavaScript po stronie serwera, które wykonuje kod JavaScript.

• Co to jest npm?

  Domyślnym menedżerem pakietów dla środowiska Node.js jest npm. Menedżer pakietów ułatwia publikowanie i udostępnianie bibliotek kodu źródłowego Node.js. Menedżer pakietów npm upraszcza instalację biblioteki, aktualizowanie i odinstalowywanie.

• Co to jest React?

  React to platforma frontonu do tworzenia interfejsu użytkownika.

• Co to jest JSX?

  JSX to rozszerzenie składni języka JavaScript zwykle używane z platformą React do opisywania elementów interfejsu użytkownika. Aby można było uruchomić kod w przeglądarce, należy transpilować kod JSX do zwykłego kodu JavaScript.

• Co to jest pakiet WebPack?

  Pakiet Webpack pakuje pliki JavaScript, aby mogły być uruchamiane w przeglądarce, a także mogą przekształcać lub pakować inne zasoby i zasoby. Pakiet Webpack może określić kompilator, taki jak Babel lub TypeScript, aby transpilować kod JSX lub TypeScript w zwykły kod JavaScript.

Wymagania wstępne

Ten samouczek wymaga następujących wymagań wstępnych:

• Program Visual Studio z zainstalowanym pakietem roboczym programowania Node.js.

  Jeśli jeszcze nie zainstalowano programu Visual Studio:

  1. Przejdź do strony pobierania programu Visual Studio, aby bezpłatnie zainstalować program Visual Studio.

  2. W Instalator programu Visual Studio wybierz obciążenie Node.js development, a następnie wybierz pozycję Zainstaluj.

     

  Jeśli masz zainstalowany program Visual Studio, ale potrzebujesz obciążenia Node.js:

  1. W programie Visual Studio przejdź do pozycji Narzędzia Pobierz narzędzia>i funkcje.

  2. W Instalator programu Visual Studio wybierz pakiet roboczy Programowanie Node.js, a następnie wybierz pozycję Modyfikuj, aby pobrać i zainstalować obciążenie.

• Zainstalowane środowisko uruchomieniowe Node.js:

  Jeśli nie masz zainstalowanego środowiska uruchomieniowego Node.js, zainstaluj wersję LTS z witryny internetowej Node.js. Wersja LTS ma najlepszą zgodność z innymi strukturami i bibliotekami.

  Narzędzia Node.js w obciążeniu Visual Studio Node.js obsługują wersje architektury Node.js 32-bitowej i 64-bitowej. Program Visual Studio wymaga tylko jednej wersji, a instalator Node.js obsługuje tylko jedną wersję naraz.

  Program Visual Studio zwykle automatycznie wykrywa zainstalowane środowisko uruchomieniowe Node.js. Jeśli nie, możesz skonfigurować projekt, aby odwoływać się do zainstalowanego środowiska uruchomieniowego:

  1. Po utworzeniu projektu kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie Właściwości.

  2. W okienku Właściwości ustaw ścieżkę Node.exe, aby odwołać się do globalnej lub lokalnej instalacji środowiska Node.js. Ścieżkę do interpretera lokalnego można określić w każdym z projektów Node.js.

Ten samouczek został przetestowany przy użyciu narzędzia Node.js 18.5.0.

Tworzenie projektu

Najpierw utwórz projekt aplikacji internetowej Node.js.

1. Otwórz program Visual Studio i naciśnij klawisz Esc , aby zamknąć okno uruchamiania.

2. Naciśnij klawisze Ctrl+Q, wpisz node.js w polu wyszukiwania, a następnie wybierz pozycję Pusta aplikacja internetowa Node.js — JavaScript z listy rozwijanej.

   Mimo że w tym samouczku jest używany kompilator TypeScript, kroki wymagają rozpoczęcia od szablonu Języka JavaScript .

   Jeśli nie widzisz opcji Pusta aplikacja internetowa Node.js, musisz zainstalować obciążenie programistyczne Node.js. Aby uzyskać instrukcje, zobacz Wymagania wstępne.

3. W oknie dialogowym Konfigurowanie nowego projektu wybierz pozycję Utwórz.

   Program Visual Studio tworzy nowe rozwiązanie i projekt, a następnie otwiera projekt w okienku po prawej stronie. Plik projektu server.js zostanie otwarty w edytorze w okienku po lewej stronie.

4. Przyjrzyj się strukturze projektu w Eksplorator rozwiązań w okienku po prawej stronie.

   

   • Na najwyższym poziomie jest rozwiązanie (1), które domyślnie ma taką samą nazwę jak projekt. Rozwiązanie reprezentowane przez plik sln na dysku jest kontenerem dla co najmniej jednego powiązanego projektu.

   • Projekt (2) przy użyciu nazwy nadanej w oknie dialogowym Konfigurowanie nowego projektu jest wyróżniony pogrubioną czcionką. W systemie plików projekt jest plikiem njsproj w folderze projektu.

     Aby wyświetlić i ustawić właściwości projektu i zmienne środowiskowe, naciśnij klawisz Alt+Enter lub kliknij projekt prawym przyciskiem myszy i wybierz polecenie Właściwości z menu kontekstowego. Możesz pracować z innymi narzędziami programistycznymi, ponieważ plik projektu nie wprowadza niestandardowych zmian w źródle projektu Node.js.

   • Węzeł npm (3) pokazuje wszystkie zainstalowane pakiety npm.

     Kliknij prawym przyciskiem myszy węzeł npm, aby wyszukać i zainstalować pakiety npm. Pakiety można instalować i aktualizować przy użyciu ustawień w pliku package.json i kliknąć prawym przyciskiem myszy opcje w węźle npm .

   • Narzędzie Npm używa pliku package.json (4) do zarządzania zależnościami i wersjami pakietów zainstalowanych lokalnie. Aby uzyskać więcej informacji, zobacz Zarządzanie pakietami npm.

   • Pliki projektu (5) są wyświetlane w węźle projektu. Plik startowy projektu server.js jest wyświetlany pogrubioną czcionką.

     Plik startowy można ustawić, klikając prawym przyciskiem myszy plik w projekcie i wybierając polecenie Ustaw jako plik startowy Node.js.

Dodawanie pakietów npm

Ta aplikacja wymaga poprawnego uruchomienia następujących modułów npm:

• Reagować
• react-dom
• express
• path
• moduł ładujący ts
• typescript
• webpack
• webpack-cli

Aby zainstalować pakiet:

1. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy węzeł npm i wybierz polecenie Zainstaluj nowe pakiety npm.

2. W oknie dialogowym Instalowanie nowych pakietów npm wyszukaj pakiet react, a następnie wybierz pozycję Zainstaluj pakiet, aby go zainstalować.

   

   W oknie dialogowym Instalowanie nowych pakietów npm można zainstalować najnowszą wersję pakietu lub określić wersję. Jeśli zdecydujesz się zainstalować bieżące wersje, ale wystąpią nieoczekiwane błędy później, spróbuj zainstalować dokładne wersje pakietów wymienione w następnym kroku.

   Okno Dane wyjściowe w dolnym okienku programu Visual Studio pokazuje postęp instalacji pakietu. Otwórz okno Dane wyjściowe, wybierając pozycję Wyświetl>dane wyjściowe lub naciskając klawisze Ctrl+Alt+O. W polu Pokaż dane wyjściowe w oknie Dane wyjściowe wybierz pozycję Npm.

   Po zainstalowaniu pakiet react pojawia się w węźle npm w Eksplorator rozwiązań.

   Plik package.json projektu jest aktualizowany przy użyciu nowych informacji o pakiecie, w tym wersji pakietu.

Zamiast używać interfejsu użytkownika do wyszukiwania i dodawania pozostałych pakietów pojedynczo, możesz wkleić wymagany kod pakietu do pliku package.json.

1. W Eksplorator rozwiązań otwórz plik package.json w edytorze programu Visual Studio. Dodaj następującą dependencies sekcję przed końcem pliku:

   "dependencies": {
     "express": "^4.18.2",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.2",
     "webpack": "^5.76.3",
     "webpack-cli": "^5.0.1"
   },
   

   Jeśli plik ma już sekcję dependencies , zastąp go poprzednim kodem JSON. Aby uzyskać więcej informacji na temat korzystania z pliku package.json , zobacz package.json configuration (Konfiguracja pliku package.json).

2. Naciśnij klawisze Ctrl+S lub wybierz pozycję Plik>Zapisz pakiet.json, aby zapisać zmiany.

3. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy węzeł npm w projekcie i wybierz polecenie Zainstaluj pakiety npm.

   To polecenie uruchamia polecenie npm install bezpośrednio, aby zainstalować wszystkie pakiety wymienione w pliku packages.json.

   Wybierz okno Dane wyjściowe w dolnym okienku, aby wyświetlić postęp instalacji. Instalacja może potrwać kilka minut i wyniki mogą nie być widoczne natychmiast. Upewnij się, że w polu Pokaż dane wyjściowe w oknie Dane wyjściowe wybrano pozycję Npm.

   Po instalacji moduły npm są wyświetlane w węźle npm w Eksplorator rozwiązań.

   

   Uwaga

   Pakiety npm można również zainstalować przy użyciu wiersza polecenia. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy nazwę projektu i wybierz polecenie Otwórz wiersz polecenia tutaj. Użyj standardowych poleceń Node.js, aby zainstalować pakiety.

Dodawanie plików projektu

Następnie dodaj do projektu cztery nowe pliki.

• app.tsx
• webpack-config.js
• Index.html
• tsconfig.json

W przypadku tej prostej aplikacji należy dodać nowe pliki projektu w katalogu głównym projektu. W przypadku większości aplikacji należy dodać pliki do podfolderów i odpowiednio dostosować odwołania do ścieżek względnych.

1. W Eksplorator rozwiązań wybierz nazwę projektu i naciśnij klawisze Ctrl+Shift+A lub kliknij prawym przyciskiem myszy nazwę projektu i wybierz polecenie Dodaj>nowy element.

   Jeśli nie widzisz wszystkich szablonów elementów, wybierz pozycję Pokaż wszystkie szablony, a następnie wybierz szablon elementu.

2. W oknie dialogowym Dodawanie nowego elementu wybierz pozycję TypeScript JSX Plik, wpisz nazwę app.tsx, a następnie wybierz pozycję Dodaj lub OK.

3. Powtórz te kroki, aby dodać plik JavaScript o nazwie webpack-config.js.

4. Powtórz te kroki, aby dodać plik HTML o nazwie index.html.

5. Powtórz te kroki, aby dodać plik konfiguracji JSON języka TypeScript o nazwie tsconfig.json.

Dodawanie kodu aplikacji

1. W Eksplorator rozwiązań otwórz plik server.js i zastąp istniejący kod następującym kodem:

   'use strict';
   var path = require('path');
   var express = require('express');
   
   var app = express();
   
   var staticPath = path.join(__dirname, '/');
   app.use(express.static(staticPath));
   
   // Allows you to set port in the project properties.
   app.set('port', process.env.PORT || 3000);
   
   var server = app.listen(app.get('port'), function() {
       console.log('listening');
   });
   

   Powyższy kod używa platformy Express do uruchomienia środowiska Node.js jako serwera aplikacji internetowej. Kod ustawia port na numer portu skonfigurowany we właściwościach projektu, który domyślnie wynosi 1337. Jeśli chcesz otworzyć właściwości projektu, kliknij prawym przyciskiem myszy nazwę projektu w Eksplorator rozwiązań i wybierz polecenie Właściwości.

2. Otwórz plik app.tsx i dodaj następujący kod:

   declare var require: any
   
   var React = require('react');
   var ReactDOM = require('react-dom');
   
   export class Hello extends React.Component {
       render() {
           return (
               <h1>Welcome to React!!</h1>
           );
       }
   }
   
   ReactDOM.render(<Hello />, document.getElementById('root'));
   

   Powyższy kod używa składni JSX i platformy React do wyświetlania komunikatu.

3. Otwórz plik index.html i zastąp sekcję body następującym kodem:

   <body>
       <div id="root"></div>
       <!-- scripts -->
       <script src="./dist/app-bundle.js"></script>
   </body>
   

   Ta strona HTML ładuje plik app-bundle.js, który zawiera transpilowane kod JSX i React do zwykłego kodu JavaScript. Obecnie plik app-bundle.js jest pusty. W następnej sekcji skonfigurujesz opcje transpilowania kodu.

Konfigurowanie opcji kompilatora Webpack i TypeScript

Następnie dodasz kod konfiguracji pakietu Webpack do pliku webpack-config.js. Dodasz prostą konfigurację pakietu webpack, która określa plik wejściowy, app.tsx i plik wyjściowy app-bundle.js, do tworzenia pakietów i transpilowania jsX do zwykłego języka JavaScript. W przypadku transpilowania można również skonfigurować niektóre opcje kompilatora TypeScript. Ten podstawowy kod konfiguracji jest wprowadzeniem do pakietu Webpack i kompilatora TypeScript.

1. W Eksplorator rozwiązań otwórz plik webpack-config.js i dodaj następujący kod.

   module.exports = {
       devtool: 'source-map',
       entry: "./app.tsx",
       mode: "development",
       output: {
           filename: "./app-bundle.js"
       },
       resolve: {
           extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
       },
       module: {
           rules: [
               {
                   test: /\.tsx$/,
                   exclude: /(node_modules|bower_components)/,
                   use: {
                       loader: 'ts-loader'
                   }
               }
           ]
       }
   }
   

   Kod konfiguracji pakietu Webpack instruuje pakiet Webpack, aby używał modułu ładującego TypeScript do transpilowania pliku JSX.

2. Otwórz plik tsconfig.json i zastąp zawartość następującym kodem, który określa opcje kompilatora TypeScript:

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "module": "commonjs",
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "jsx": "react"
     },
     "exclude": [
       "node_modules"
     ],
     "files": [
       "app.tsx"
     ]
   }
   

   Kod określa plik źródłowy app.tsx .

3. Naciśnij klawisze Ctrl+Shift+S lub wybierz pozycję Plik>Zapisz wszystko, aby zapisać wszystkie zmiany.

Transpilowanie struktury JSX

1. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy nazwę projektu i wybierz polecenie Otwórz wiersz polecenia tutaj.

2. W wierszu polecenia wprowadź następujące polecenie webpack:

   node_modules\.bin\webpack --config webpack-config.js

   W oknie wiersza polecenia zostanie wyświetlony wynik.

   

   Jeśli zostaną wyświetlone jakiekolwiek błędy zamiast powyższych danych wyjściowych, należy je rozwiązać, zanim aplikacja będzie działać. Jeśli wersje pakietu npm są inne niż wersje określone w tym samouczku, może to spowodować błędy. Aby naprawić błędy, spróbuj wykonać następujące czynności:

   • Użyj dokładnych wersji pokazanych we wcześniejszym kroku, jeśli jeszcze tego nie zrobiono

     Lub, jeśli nadal występują błędy:

   • Zainstaluj najnowsze wersje pakietów npm, klikając prawym przyciskiem myszy węzeł npm w Eksplorator rozwiązań i wybierając polecenie Zainstaluj pakiety npm.

   Jeśli co najmniej jedna wersja pakietu jest przestarzała i powoduje wystąpienie błędu, może być konieczne zainstalowanie nowszej wersji, aby naprawić błędy. Aby uzyskać informacje na temat używania pliku package.json do kontrolowania wersji pakietów npm, zobacz konfiguracja pliku package.json.

3. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie Dodaj>istniejący folder.

4. Wybierz folder dist, a następnie wybierz pozycję Wybierz folder.

   Program Visual Studio dodaje do projektu folder dist zawierający plik app-bundle.js i app-bundle.js.map.

5. Otwórz plik app-bundle.js , aby wyświetlić transpilowany kod JavaScript.

6. Jeśli zostanie wyświetlony monit o ponowne załadowanie zmodyfikowanych zewnętrznie plików, wybierz pozycję Tak do wszystkich.

   

Za każdym razem, gdy wprowadzisz zmiany w pliku app.tsx, musisz ponownie uruchomić polecenie Webpack. Aby zautomatyzować ten krok, możesz dodać skrypt kompilacji do transpilowania pliku JSX.

Dodawanie skryptu kompilacji w celu transpilowania pliku JSX

Wersje programu Visual Studio, począwszy od programu Visual Studio 2019, wymagają skryptu kompilacji. Zamiast transpilować plik JSX w wierszu polecenia, jak pokazano w poprzedniej sekcji, można transpilować plik JSX podczas kompilowania z poziomu programu Visual Studio.

1. Otwórz plik package.json i dodaj następującą sekcję dependencies po sekcji:

   "scripts": {
    "build": "webpack-cli --config webpack-config.js"
   }
   

2. Zapisz zmiany.

Uruchom aplikację

1. Na pasku narzędzi Debugowanie wybierz serwer sieci Web (Microsoft Edge) lub serwer sieci Web (Google Chrome) jako element docelowy debugowania.

   

   Jeśli wiesz, że preferowany element docelowy debugowania jest dostępny na maszynie, ale nie jest wyświetlany jako opcja, wybierz pozycję Przeglądaj za pomocą z listy rozwijanej miejsca docelowego debugowania. Wybierz domyślny element docelowy przeglądarki na liście, a następnie wybierz pozycję Ustaw jako domyślny.

2. Aby uruchomić aplikację, naciśnij klawisz F5, wybierz zielony przycisk strzałki lub wybierz pozycję Debuguj>Rozpocznij debugowanie.

   Zostanie otwarte okno konsoli Node.js zawierające port nasłuchiwania debugera.

   Program Visual Studio uruchamia aplikację, uruchamiając plik startowy server.js.

   

3. Zamknij okna przeglądarki i konsoli.

Ustawianie punktu przerwania i uruchamianie aplikacji

Punkty przerwania to najbardziej podstawowa i kluczowa funkcja wiarygodnego debugowania. Punkt przerwania wskazuje, gdzie program Visual Studio powinien zawiesić uruchomiony kod. Następnie można obserwować wartości zmiennych, zachowanie pamięci lub uruchomić gałąź kodu.

1. W pliku server.js kliknij w rynnie po lewej stronie staticPath deklaracji, aby ustawić punkt przerwania:

   

2. Aby uruchomić aplikację, naciśnij klawisz F5 lub wybierz pozycję Debuguj>rozpocznij debugowanie.

   Debuger wstrzymuje się w ustawionym punkcie przerwania z wyróżnioną bieżącą instrukcją. Teraz możesz sprawdzić stan aplikacji, umieszczając kursor na zmiennych, które są obecnie w zakresie, przy użyciu okien debugera, takich jak okna Lokalne i Watch .

3. Aby kontynuować uruchamianie aplikacji, naciśnij klawisz F5, wybierz pozycję Kontynuuj na pasku narzędzi Debugowanie lub wybierz pozycję Debuguj>kontynuuj.

   Jeśli chcesz użyć narzędzi dla deweloperów przeglądarki Chrome lub narzędzi F12 dla przeglądarki Microsoft Edge, naciśnij klawisz F12. Za pomocą tych narzędzi można zbadać dom i wchodzić w interakcję z aplikacją przy użyciu konsoli języka JavaScript.

4. Zamknij okna przeglądarki i konsoli.

Ustawianie i trafienie punktu przerwania w kodzie react po stronie klienta

W poprzedniej sekcji dołączono debuger do kodu Node.js po stronie serwera. Aby dołączyć do punktów przerwania i trafić w kodzie React po stronie klienta, należy dołączyć debuger do poprawnego procesu. Oto jeden ze sposobów włączania przeglądarki i dołączania procesu do debugowania.

Włączanie przeglądarki na potrzeby debugowania

Możesz użyć przeglądarki Microsoft Edge lub Google Chrome. Zamknij wszystkie okna przeglądarki docelowej. W przeglądarce Microsoft Edge zamknij również wszystkie wystąpienia przeglądarki Chrome. Ponieważ obie przeglądarki współużytkują bazę kodu Chromium, zamknięcie obu przeglądarek daje najlepsze wyniki.

Inne wystąpienia przeglądarki mogą uniemożliwić otwieranie przeglądarki z włączonym debugowaniem. Rozszerzenia przeglądarki mogą uniemożliwiać tryb pełnego debugowania. Aby znaleźć i zakończyć wszystkie uruchomione wystąpienia programu Chrome, może być konieczne użycie Menedżera zadań.

Aby uruchomić przeglądarkę z włączonym debugowaniem:

1. Wybierz pozycję Przeglądaj za pomocą z listy rozwijanej na pasku narzędzi Debugowanie.

2. Na ekranie Przeglądaj za pomocą z wyróżnioną preferowaną przeglądarką wybierz pozycję Dodaj.

3. Wprowadź flagę --remote-debug-port=9222 w polu Argumenty .

4. Nadaj przeglądarce nową przyjazną nazwę, taką jak Przeglądarka Edge z debugowaniem lub Chrome z debugowaniem, a następnie wybierz przycisk OK.

5. Na ekranie Przeglądaj za pomocą wybierz pozycję Przeglądaj.

   

• Alternatywnie możesz otworzyć polecenie Uruchom, klikając prawym przyciskiem myszy przycisk Start systemu Windows, a następnie wprowadź:

  msedge --remote-debugging-port=9222

  lub

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

Przeglądarka rozpoczyna się od włączonego debugowania. Aplikacja nie jest jeszcze uruchomiona, więc strona przeglądarki jest pusta.

Dołączanie debugera do skryptu po stronie klienta

1. W edytorze programu Visual Studio ustaw punkt przerwania w kodzie źródłowym app-bundle.js lub app.tsx .

   • W przypadku pliku app-bundle.js ustaw punkt przerwania render() w funkcji . Aby znaleźć render() funkcję w pliku app-bundle.js, naciśnij klawisze Ctrl+F lub wybierz pozycję Edytuj>znajdź i zastąp>szybkie wyszukiwanie, a następnie wprowadź tekst renderowany w polu wyszukiwania.

     

   • W przypadku pliku app.tsx ustaw punkt przerwania wewnątrz render() funkcji w instrukcji return .

     

     Jeśli ustawisz punkt przerwania w pliku app.tsx, zaktualizuj również plik webpack-config.js , aby zastąpić następujący kod i zapisać zmiany.

     Zastąp ten kod:

     output: {
         filename: "./app-bundle.js",
     },
     

     W przypadku następującego kodu:

     output: {
         filename: "./app-bundle.js",
         devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
     },
     

     To ustawienie tylko do programowania umożliwia debugowanie w programie Visual Studio. Domyślnie odwołania do pakietu Webpack w pliku mapy źródłowej zawierają prefiks webpack:/// , co uniemożliwia programowi Visual Studio znalezienie pliku źródłowego app.tsx. To ustawienie zastępuje wygenerowane odwołania w pliku mapy źródłowej app-bundle.js.map podczas kompilowania aplikacji. W szczególności to ustawienie zmienia odwołanie do pliku źródłowego z webpack:///./app.tsx na ./app.tsx, co umożliwia debugowanie.

2. Wybierz przeglądarkę docelową jako element docelowy debugowania w programie Visual Studio, a następnie naciśnij klawisze Ctrl+F5 lub wybierz pozycję Debuguj>rozpocznij bez debugowania, aby uruchomić aplikację w przeglądarce.

   Jeśli utworzono konfigurację przeglądarki z obsługą debugowania z przyjazną nazwą, wybierz tę przeglądarkę jako element docelowy debugowania.

   Aplikacja zostanie otwarta na nowej karcie przeglądarki.

3. Wybierz pozycję Debuguj dołączanie>do procesu lub naciśnij klawisze Ctrl+Alt+P.

   Napiwek

   Po dołączeniu do procesu po raz pierwszy możesz szybko ponownie dołączyć do tego samego procesu, wybierając pozycję Debuguj>ponownie dołącz do procesu lub naciskając klawisze Shift+Alt+P.

4. W oknie dialogowym Dołączanie do procesu pobierz filtrowaną listę wystąpień przeglądarki, do których można dołączyć.

   Upewnij się, że w polu Dołącz do jest wyświetlany prawidłowy debuger przeglądarki docelowej, JavaScript (Chrome) lub JavaScript (Microsoft Edge — Chromium). Wpisz chrome lub edge w polu filtru, aby filtrować wyniki.

5. Wybierz proces przeglądarki z poprawnym portem hosta localhost w tym przykładzie. Numer portu 1337 lub localhost może być również wyświetlany w polu Tytuł , aby ułatwić wybranie prawidłowego procesu.

6. Wybierz Dołącz.

   W poniższym przykładzie przedstawiono okno Dołączanie do procesu dla przeglądarki Microsoft Edge.

   

   Napiwek

   Jeśli debuger nie zostanie dołączony i zostanie wyświetlony komunikat Nie można dołączyć do procesu. Operacja nie jest legalna w bieżącym stanie. Użyj Menedżera zadań, 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.

7. Ponieważ kod z już wykonanym punktem przerwania, odśwież stronę przeglądarki, aby trafić do punktu przerwania.

   W zależności od środowiska, stanu przeglądarki i kroków, które wykonano wcześniej, możesz napotkać punkt przerwania w pliku app-bundle.js lub jego zamapowaną lokalizację w pliku app.tsx. Tak czy inaczej, możesz przejść przez kod i zbadać zmienne.

   Podczas wstrzymania debugera możesz sprawdzić stan aplikacji, umieszczając kursor na zmiennych i używając okien debugera. Aby przejść przez kod, naciśnij klawisz F11 lub wybierz pozycję Debuguj>krok do lub naciśnij klawisz F10 lub wybierz pozycję Debuguj>krok po kroku. Aby kontynuować uruchamianie kodu, naciśnij klawisz F5 lub wybierz pozycję Kontynuuj. Aby uzyskać więcej informacji na temat podstawowych funkcji debugowania, zobacz Pierwsze spojrzenie na debuger.

   • Jeśli nie możesz podzielić kodu w pliku app.tsx, spróbuj ponownie użyć polecenia Dołącz do procesu , aby dołączyć debuger zgodnie z opisem w poprzednich krokach. 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ń. Upewnij się, że przeglądarka jest uruchamiana w trybie debugowania.

     • Upewnij się, że plik mapy źródłowej zawiera odwołanie do pliku ./app.tsx , a nie webpack:///./app.tsx, co uniemożliwia debugerowi programu Visual Studio lokalizowanie pliku app.tsx.

     Możesz też użyć instrukcji debugger; w pliku app.tsx lub ustawić punkty przerwania w narzędziach dla deweloperów programu Chrome lub narzędziach F12 dla przeglądarki Microsoft Edge.

   • Jeśli nie możesz podzielić kodu w pliku app-bundle.js, usuń plik mapy źródłowej app-bundle.js.map.

Następne kroki

Wdrażanie aplikacji w usłudze App Service systemu Linux