Oktatóanyag: Node.js és React-alkalmazás létrehozása a Visual Studióban

A Visual Studióval egyszerűen létrehozhat egy Node.js projektet, és használhatja az IntelliSense-t és az Node.jstámogató egyéb beépített funkciókat. Ebben az oktatóanyagban egy Node.js webalkalmazás-projektet hoz létre egy Visual Studio-sablonból. Ezután létrehozhat egy egyszerű alkalmazást a React használatával.

Ebben az oktatóanyagban a következőket sajátíthatja el:

Node.js-projekt létrehozása
NPM-csomagok hozzáadása
React-kód hozzáadása az alkalmazáshoz
Transpile JSX
A hibakereső csatolása

Fontos

A Visual Studio 2022-től másik lehetőségként létrehozhat egy React-projekt az ajánlott CLI-alapú projekttípussal. A cikkben szereplő információk némelyike csak a Node.js projekttípusra (.njsproj) vonatkozik. A cikkben használt sablon már nem érhető el a Visual Studio 2022 17.8 Preview 2-es verziójától kezdve.

Mielőtt hozzákezdene, íme egy rövid útmutató a leggyakoribb kérdésekről, amely bemutatja néhány kulcsfogalmat.

Mi az a Node.js?

Node.js egy kiszolgálóoldali JavaScript-futtatókörnyezet, amely JavaScript-kódot futtat.
Mi az npm?

A Node.js alapértelmezett csomagkezelője az npm. A csomagkezelő megkönnyíti Node.js forráskódtárak közzétételét és megosztását. Az npm-csomagkezelő leegyszerűsíti a kódtár telepítését, frissítését és eltávolítását.
Mi az a React?

A React egy felhasználói felület (UI) létrehozására szolgáló előtérbeli keretrendszer.
Mi az a JSX?

A JSX egy JavaScript-szintaxisbővítmény, amelyet a React általában a felhasználói felület elemeinek leírására használ. A JSX-kódot egyszerű JavaScriptre kell lefordítania, mielőtt a böngészőben futtatható lenne.
Mi a webpack?

A Webpack a JavaScript-fájlokat csomagolja, hogy böngészőben fussanak, és más erőforrásokat és eszközöket is átalakíthat vagy csomagolhat. A Webpack megadhat egy fordítót, például Babelt vagy TypeScriptet a JSX- vagy TypeScript-kód egyszerű JavaScriptre való fordításához.

Előfeltételek

Ehhez az oktatóanyaghoz a következő előfeltételek szükségesek:

A Visual Studio telepítve van a Node.js fejlesztési számítási feladattal.

Ha még nem telepítette a Visual Studiót:
1. Nyissa meg a Visual Studio letöltési lapot a Visual Studio ingyenes telepítéséhez.
2. A Visual Studio Installerben válassza ki a Node.js fejlesztési munkaterhelést, majd válassza a Telepítéslehetőséget.
Ha telepítve van a Visual Studio, de szüksége van a Node.js számítási feladatra:
1. A Visual Studióban nyissa meg az Eszközök>Eszközök és szolgáltatások lekéréselehetőséget.
2. A Visual Studio Installerben válassza ki a Node.js fejlesztési számítási feladatot, majd válassza a módosítása lehetőséget a számítási feladat letöltéséhez és telepítéséhez.
A telepített Node.js futtatókörnyezet:

Ha nincs telepítve a Node.js futtatókörnyezet, telepítse az LTS-verziót a Node.js webhelyről. Az LTS-verzió a legjobb kompatibilitást biztosítja más keretrendszerekkel és kódtárakkal.

A Visual Studio Node.js számítási feladatainak Node.js eszközei Node.js 32 bites és 64 bites architektúraverziókat is támogatnak. A Visual Studio csak egy verziót igényel, és a Node.js telepítője egyszerre csak egy verziót támogat.

A Visual Studio általában automatikusan észleli a telepített Node.js futtatókörnyezetet. Ha nem, konfigurálhatja a projektet úgy, hogy a telepített futtatókörnyezetre hivatkozzon:
1. Miután létrehozott egy projektet, kattintson a jobb gombbal a projektcsomópontra, és válassza a Tulajdonságoklehetőséget.
2. A Tulajdonságok panelen állítsa be a Node.exe elérési utat, hogy a Node.jsglobális vagy helyi telepítésére hivatkozzon. Az egyes Node.js projektekben megadhatja a helyi értelmező elérési útját.

Ezt az oktatóanyagot a Node.js 12.6.2 verzióval teszteltük.

Projekt létrehozása

Először hozzon létre egy Node.js webalkalmazás-projektet.

Nyissa meg a Visual Studiót.
Hozzon létre egy új projektet.

A kezdőablak bezárásához nyomja le Esc. Írja be a Ctrl + Q billentyűkombinációt a keresőmező megnyitásához, írja be a Node.js, majd válassza Üres Node.js webalkalmazás – JavaScriptlehetőséget. (Bár ez az oktatóanyag a TypeScript-fordítót használja, a lépésekhez a JavaScript- sablonnal kell kezdenie.)

A megjelenő párbeszédpanelen válassza a létrehozása lehetőséget.

Ha nem látja a Üres Node.js webalkalmazás projektsablont, hozzá kell adnia a Node.js fejlesztési számítási feladatot. Részletes útmutatásért lásd az előfeltételek.

A Visual Studio létrehozza az új megoldást, és megnyitja a projektet.

A félkövérrel ki van emelve a projektje, amely a Új projekt párbeszédpanelen megadott nevet használja. A fájlrendszerben ezt a projektet egy .njsproj fájl jelöli a projektmappában. A projekthez társított tulajdonságokat és környezeti változókat úgy állíthatja be, hogy a jobb gombbal a projektre kattint, és kiválasztja a Tulajdonságok (vagy nyomja le Alt + Enter). Más fejlesztési eszközökkel is végezhet oda-vissza konverziót, mert a projektfájl nem végez egyedi módosításokat a Node.js projekt forrásán.

(2) A legfelső szinten egy megoldás található, amelynek alapértelmezés szerint ugyanaz a neve, mint a projektnek. A lemezen található .sln fájl által képviselt megoldás egy vagy több kapcsolódó projekt tárolója.

(3) Az npm csomópont megjeleníti a telepített npm-csomagokat. A jobb gombbal az npm-elemre kattintva kereshet és telepíthet npm-csomagokat egy párbeszédpanel használatával, vagy telepíthet és frissíthet csomagokat az package.json beállításaival és a jobb gombbal elérhető opciókkal az npm-elem esetében.

(4) package.json az npm által a helyileg telepített csomagok csomagfüggőségeinek és csomagverzióinak kezelésére használt fájl. További információ: NPM-csomagok kezelése.

(5) A projektfájlok, például a server.js megjelennek a projektcsomópont alatt. server.js a projekt indító fájlja, ezért jelenik meg félkövéren. Az indítási fájl beállításához kattintson jobb gombbal a projekt egyik fájljára, és válassza a Beállítás Node.js indítási fájlkéntlehetőséget.

NPM-csomagok hozzáadása

Ehhez az alkalmazáshoz a következő npm-modulok megfelelő futtatására van szükség:

reagál
react-dom
kifejez
elérési út
ts-loader
géppel írott szöveg
webpack
webpack-cli

Csomag telepítése:

A Megoldáskezelőbenkattintson a jobb gombbal az npm csomópontra, és válassza az Új npm-csomagok telepítéselehetőséget.
Az Új npm-csomagok telepítése párbeszédpanelen keresse meg a react csomagot, és válassza a Csomag telepítése lehetőséget a telepítéshez.

Az Új npm-csomagok telepítése párbeszédpanelen kiválaszthatja a legújabb csomagverzió telepítését vagy a verzió megadását. Ha úgy dönt, hogy telepíti az aktuális verziókat, de később váratlan hibákba ütközik, próbálja meg telepíteni a következő lépésben felsorolt csomagverziókat.

A Kimeneti ablak a Visual Studio alsó paneljén a csomagtelepítés előrehaladását mutatja. Nyissa meg a Kimenet ablakot a Nézet>Kimenet vagy a Ctrl+Alt+Obillentyűkombinációval. A Kimenet megjelenítése a Kimenet ablak mezőjében válassza Npmlehetőséget.

A telepítéskor a react csomag megjelenik az Megoldáskezelőnpm csomópontja alatt.

A projekt package.json fájlja frissül az új csomaginformációkkal, beleértve a csomagverziót is.

Ahelyett, hogy a felhasználói felületet használja a többi csomag keresésére és egyenkénti hozzáadására, beillesztheti a szükséges csomagkódot package.json.

A Megoldáskezelőnézetben nyissa meg a package.json a Visual Studio szerkesztőjében. Adja hozzá a következő dependencies szakaszt a fájl vége előtt:
```
"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"
},
```
Ha a fájl már rendelkezik dependencies szakaszsal, cserélje le az előző JSON-kódra. További információ a package.json fájl használatáról: package.json konfigurációs.
A módosítások mentéséhez nyomja le a Ctrl+S vagy a Fájl>Mentés package.json lehetőséget.
A Megoldáskezelőbenkattintson a jobb gombbal a projekt npm csomópontjára, és válassza az Az npm-csomagok telepítéselehetőséget.

Ez a parancs közvetlenül az npm telepítési parancsot futtatja a packages.jsonfelsorolt csomagok telepítéséhez.

Az alsó panelen válassza a Kimeneti ablakot a telepítés előrehaladásának megtekintéséhez. A telepítés eltarthat néhány percig, és előfordulhat, hogy nem látja azonnal az eredményeket. Győződjön meg arról, hogy a Kimenet megjelenítése mezőben az Npm van kiválasztva a Kimenet ablakban.

A telepítés után az npm-modulok megjelennek a Solution Explorernpm csomópontjában.

Jegyzet

Az npm-csomagokat a parancssor használatával is telepítheti. A Megoldáskezelőbenkattintson a jobb gombbal a projekt nevére, és válassza a Parancssor megnyitása ittlehetőséget. Standard Node.js parancsok használatával telepíthet csomagokat.

Projektfájlok hozzáadása

Ezután vegyen fel négy új fájlt a projektbe.

app.tsx
webpack-config.js
index.html
tsconfig.json

Ehhez az egyszerű alkalmazáshoz hozzá kell adnia az új projektfájlokat a projekt gyökeréhez. A legtöbb alkalmazás esetében a fájlokat az almappákhoz kell hozzáadnia, és ennek megfelelően módosíthatja a relatív elérési út hivatkozásait.

A Megoldáskezelőbenjelölje ki a projekt nevét, és nyomja le Ctrl+Shift+A, vagy kattintson a jobb gombbal a projekt nevére, és válassza a >Új elem hozzáadásalehetőséget.

Ha nem látja az összes elemsablont, válassza Az összes sablon megjelenítéselehetőséget, majd válassza ki az elemsablont.
Az Új elem hozzáadása párbeszédpanelen válassza TypeScript JSX-fájl, írja be a nevet app.tsx, majd válassza hozzáadása vagy OKlehetőséget.
Ismételje meg ezeket a lépéseket egy webpack-config.jsnevű JavaScript-fájl hozzáadásához.
Ismételje meg ezeket a lépéseket egy index.htmlnevű HTML-fájl hozzáadásához.
Ismételje meg ezeket a lépéseket egy tsconfig.jsonnevű TypeScript JSON-konfigurációs fájl hozzáadásához.

Alkalmazáskód hozzáadása

Nyissa meg a Megoldáskezelő-t, a server.js-t, és cserélje a meglévő kódot a következő kódra:
```
'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');
});
```
Az előző kód az Express használatával indítja el a Node.js webalkalmazás-kiszolgálóként. A kód a portot a projekttulajdonságokban konfigurált portszámra állítja, amely alapértelmezés szerint 1337. Ha meg kell nyitnia a projekt tulajdonságait, kattintson a jobb gombbal a projekt nevére Megoldáskezelő, és válassza a Tulajdonságoklehetőséget.

Nyissa meg app.tsx, és adja hozzá a következő kódot:

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'));

Az előző kód JSX szintaxist és React-et használ egy üzenet megjelenítéséhez.

Nyissa meg index.html, és cserélje le a body szakaszt a következő kódra:
```
<body>
    <div id="root"></div>
    
    <script src="./dist/app-bundle.js"></script>
</body>
```
Ez a HTML-oldal betölti app-bundle.js, amely tartalmazza a sima JavaScript-re átalakított JSX- és React-kódot. Jelenleg app-bundle.js egy üres fájl. A következő szakaszban konfigurálja a kód fordításának beállításait.

Webpack- és TypeScript-fordítóbeállítások konfigurálása

Ezután hozzáadod a webpack konfigurációs kódot a webpack-config.js-hez. Hozzáadhat egy egyszerű webpack-konfigurációt, amely meghatározza a bemeneti fájlt, app.tsx, valamint egy kimeneti fájlt, app-bundle.js, a JSX egyszerű JavaScriptre való összekapcsolásához és fordításához. Az átfordításhoz néhány TypeScript-fordítóbeállítást is konfigurálhat. Ez az alapkonfigurációs kód a webpack és a TypeScript fordító bemutatása.

Nyissa meg webpack-config.jsMegoldáskezelő, és adja hozzá a következő kódot.

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'
                }
            }
        ]
    }
}

A webpack konfigurációs kód arra utasítja a webpackot, hogy a TypeScript-betöltőt használja a JSX fordításához.

Nyissa meg tsconfig.json, és cserélje le a tartalmat a következő kódra, amely megadja a TypeScript-fordító beállításait:

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

A kód a app.tsx adja meg forrásfájlként.

Nyomja le a Ctrl+Shift+S vagy válassza Fájl>Az összes mentése lehetőséget az összes módosítás mentéséhez.

A JSX fordítása

A Megoldáskezelőbenkattintson a jobb gombbal a projekt nevére, és válassza a Parancssor megnyitása ittlehetőséget.
A parancssorban adja meg a következő webpack parancsot:

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

A parancssor ablaka megjeleníti az eredményt.

Ha az előző kimenet helyett bármilyen hibát lát, az alkalmazás működése előtt meg kell oldania azokat. Ha az npm-csomagverziók eltérnek az oktatóanyag által megadott verzióktól, az hibákat okozhat. A hibák kijavításához próbálkozzon a következőkkel:
- Használja a korábbi lépésben szereplő pontos verziókat, ha még nem tette meg
  
  Vagy ha továbbra is hibaüzeneteket lát:
- Az npm-csomagok legújabb verzióinak telepítéséhez kattintson a jobb gombbal az npm csomópontra a Megoldáskezelőben, és válassza az Az npm-csomagok telepítéseparancsot.
Ha egy vagy több csomagverzió elavult, és hibát eredményez, előfordulhat, hogy a hibák kijavításához telepítenie kell egy újabb verziót. Az package.json használatával az npm csomagverziók vezérléséről a package.json konfiguráció című részben találhat információt.
A Megoldáskezelőkattintson a jobb gombbal a projektcsomópontra, és válassza a >Meglévő mappa hozzáadásalehetőséget.
Jelölje ki a mappát, majd válassza Mappa kijelöléselehetőséget.

A Visual Studio hozzáadja a dist mappát, amely app-bundle.js és app-bundle.js.maptartalmaz a projekthez.
Nyissa meg a app-bundle.js a lefordított JavaScript-kód megtekintéséhez.
Ha a rendszer megkérdezi, hogy szeretné-e újra betölteni a külsőleg módosított fájlokat, válassza Igen az összesrelehetőséget.

Valahányszor módosítja a app.tsx-t, újra kell futtatnia a webpack parancsot. A lépés automatizálásához hozzáadhat egy buildszkriptet a JSX fordításához.

Buildszkript hozzáadása a JSX transpilálásához

A Visual Studio 2019-től kezdődő Visual Studio-verziókhoz buildszkript szükséges. A JSX parancssori fordítása helyett, ahogyan az előző szakaszban látható, a JSX-et a Visual Studióból való buildeléskor is lefordíthatja.

Nyissa meg package.json, és adja hozzá a következő szakaszt a dependencies szakasz után:
```
"scripts": {
 "build": "webpack-cli --config webpack-config.js"
}
```
Mentse a módosításokat.

Az alkalmazás futtatása

A Hibakeresési eszköztáron válassza webkiszolgáló (Microsoft Edge) vagy webkiszolgáló (Google Chrome) hibakeresési célként.

Ha tudja, hogy az előnyben részesített hibakeresési cél elérhető a számítógépen, de nem jelenik meg lehetőségként, válassza Tallózás lehetőséget a hibakeresési cél legördülő listájából. Válassza ki az alapértelmezett böngészőcélt a listában, és válassza a Beállítás alapértelmezettlehetőséget.
Az alkalmazás futtatásához nyomja le F5, válassza a zöld nyílgombot, vagy válassza Hibakeresés>Hibakeresés indításalehetőséget.

Megnyílik egy Node.js konzolablak, amely a hibakereső figyelési portját jeleníti meg.

A Visual Studio elindítja az alkalmazást az indítási fájl elindításával, server.js.
Zárja be a böngésző- és konzolablakokat.

Töréspont beállítása és az alkalmazás futtatása

A töréspontok a megbízható hibakeresés legalapvetőbb és leglényegesebb funkciói. A töréspont azt jelzi, hogy a Visual Studio hol függesztheti fel a futó kódot. Ezután megfigyelheti a változó értékeket, a memória viselkedését, vagy azt, hogy a kód egy ága fut-e.

A server.jskattintson a staticPath deklarációtól balra lévő sávban egy töréspont beállításához:
Az alkalmazás futtatásához nyomja le F5 vagy válassza Hibakeresés>Hibakeresés indításalehetőséget.

A hibakereső a beállított töréspontnál szünetel, és az aktuális utasítás ki van emelve. Most megvizsgálhatja az alkalmazás állapotát, ha a jelenleg hatókörben lévő változók fölé viszi az egérmutatót, olyan hibakereső ablakokat használva, mint a Helyiek és Watch ablakokat.
Az alkalmazás futtatásának folytatásához nyomja le az F5billentyűt, válassza a folytatása lehetőséget a Hibakeresés eszköztáron, vagy válassza Hibakeresés>Folytatáslehetőséget.

Ha a Chrome Developer Tools vagy az F12 Tools for Microsoft Edge eszközt szeretné használni, nyomja le F12. Ezekkel az eszközökkel megvizsgálhatja a DOM-ot, és a JavaScript-konzol használatával kezelheti az alkalmazást.
Zárja be a böngésző- és konzolablakokat.

Töréspont beállítása és elérése az ügyféloldali React-kódban

Az előző szakaszban csatolta a hibakeresőt a kiszolgálóoldali Node.js kódhoz. Ahhoz, hogy az ügyféloldali React-kódban töréspontokat csatoljon és elérjen, a hibakeresőt a megfelelő folyamathoz kell csatolnia. Az alábbiakban bemutatjuk, hogyan engedélyezheti a böngészőt, és csatolhat egy hibakeresési folyamatot.

A böngésző engedélyezése hibakereséshez

Használhatja a Microsoft Edge-et vagy a Google Chrome-ot. Zárja be a célböngésző összes ablakát. A Microsoft Edge esetében a Chrome összes példányát is állítsa le. Mivel mindkét böngésző osztozik a Chromium-kódbázison, mindkét böngésző leállítása a legjobb eredményt nyújtja.

Más böngészőpéldányok megakadályozhatják a böngésző megnyitását, ha engedélyezve van a hibakeresés. A böngészőbővítmények megakadályozhatják a teljes hibakeresési módot. Előfordulhat, hogy az összes futó Chrome-példány megkereséséhez és befejezéséhez a Task Managert kell használnia.

A böngésző hibakeresési módban való indításához:

Válassza Tallózás lehetőséget a Hibakeresés eszköztár legördülő listájából.
A Tallózás képernyőn az előnyben részesített böngészőt kiemelve válassza a Hozzáadáslehetőséget.
Adja meg a --remote-debugging-port=9222 jelzőt az Argumentumok mezőben.
Adjon új felhasználóbarát nevet a böngészőnek, például Edge hibakereséssel vagy Chrome hibakereséssel, majd válassza a OKlehetőséget.
A Tallózás képernyőn válassza a Tallózáslehetőséget.

Másik lehetőségként a windowsos Start gombra jobb gombbal kattintva megnyithatja a Futtatás parancsot, és írja be a következőt:

msedge --remote-debugging-port=9222

vagy

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

A böngésző a hibakeresés engedélyezésével kezdődik. Az alkalmazás még nem fut, ezért a böngészőoldal üres.

A hibakereső csatolása ügyféloldali szkripthez

A Visual Studio szerkesztőjében állítson be töréspontot a app-bundle.js vagy app.tsx forráskódban.
- app-bundle.jsesetén állítsa be a töréspontot a render() függvényben. A render() fájlban található függvény megkereséséhez nyomja le a Ctrl+F billentyűkombinációt, vagy válassza a Szerkesztés>Keresés és csere>lehetőséget, majd a Gyorskeresést, és írja be a render kifejezést a keresőmezőbe.
- Az app.tsxesetében állítsd be a töréspontot a render() függvényben, a return utasításban.
  
  Ha a app.tsx-ban állítja be a töréspontot, frissítse a webpack-config.js-t a következő kódra, és mentse a módosításokat.
  
  Cserélje le a következő kódot:
```
output: {
    filename: "./app-bundle.js",
},
```
  A következő kóddal:
```
output: {
    filename: "./app-bundle.js",
    devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
},
```
  Ez a csak fejlesztési beállítás lehetővé teszi a hibakeresést a Visual Studióban. Alapértelmezés szerint a webpack-hivatkozások a forrástérképfájlban tartalmazzák a webpack:/// előtagot, amely megakadályozza, hogy a Visual Studio megkeresse a forrásfájlt app.tsx. Ez a beállítás felülírja a forrástérképfájlban létrehozott hivatkozásokat, app-bundle.js.map, az alkalmazás létrehozásakor. Ez a beállítás a forrásfájlra való hivatkozást webpack:///./app.tsx./app.tsxértékre módosítja, amely lehetővé teszi a hibakeresést.
Jelölje ki a célböngészőt hibakeresési célként a Visual Studióban, majd nyomja le a Ctrl+F5billentyűkombinációt, vagy válassza Hibakeresés>Hibakeresésnélkül lehetőséget az alkalmazás böngészőben való futtatásához.

Ha barátságos névvel hozott létre hibakereső böngésző konfigurációt, válassza azt a böngészőt hibakeresési célnak.

Az alkalmazás megnyílik egy új böngészőlapon.
Válassza a Hibakeresési>Csatlakozás folyamathozlehetőséget, vagy nyomja meg a Ctrl+Alt+Pbillentyűket.

Borravaló

Ha első alkalommal csatlakozik a folyamathoz, gyorsan újracsatlakoztathatja ugyanahhoz a folyamathoz, ha a Debug>Reattach to Process vagy a Shift+Alt+Pbillentyűkombinációt választja.
A Csatolás a folyamathoz párbeszédpanelen kérje le a böngészőpéldányok szűrt listáját, amelyekhez csatlakozhat.

Győződjön meg arról, hogy a célzott böngészőhöz megfelelő hibakereső, JavaScript (Chrome) vagy JavaScript (Microsoft Edge – Chromium)jelenik meg a Csatolás mezőben. Az eredmények szűréséhez írja be chrome vagy Edge a szűrőmezőbe.
Válassza ki a böngészőfolyamatot a megfelelő gazdagép portjával; ebben a példában localhost. Az 1337 vagy localhost portszám is megjelenhet a Cím mezőben a megfelelő folyamat kiválasztásához.
Válassza Csatoláslehetőséget.

Az alábbi példában egy Csatolás a folyamathoz ablak látható a Microsoft Edge böngészőben.

Borravaló

Ha a hibakereső nem kapcsolódik, és megjelenik az üzenet, Nem csatolható a folyamathoz. A művelet a jelenlegi állapotban nem érvényes., a Feladatkezelővel zárja be a célböngésző összes példányát, mielőtt hibakeresési módba kezdené a böngészőt. Előfordulhat, hogy a böngészőbővítmények futnak, és megakadályozzák a teljes hibakeresési módot.
Mivel a töréspontot tartalmazó kód már végrehajtásra került, frissítse a böngészőoldalt, hogy elérje a töréspontot.

A környezettől, a böngésző állapotától és a korábban követett lépésektől függően előfordulhat, hogy eléri a töréspontot app-bundle.js vagy annak leképezett helyét app.tsx. Akárhogy is, végiglépkedhet a kódon, és megvizsgálhatja a változókat.

Amíg a hibakereső szüneteltetve van, megvizsgálhatja az alkalmazás állapotát úgy, hogy változók fölé viszi az egérmutatót, és hibakereső ablakokat használ. A kód végiglépéséhez nyomja le a F11 billentyűt, vagy válassza a Hibakeresés>Belelépéslehetőséget, vagy nyomja le a F10 billentyűt, vagy válassza a Hibakeresés>Átlépéslehetőséget. A kód futtatásának folytatásához nyomja le F5 vagy válassza a Folytatáslehetőséget. További információ az alapvető hibakeresési funkciókról: Először tekintse meg a hibakeresőt.
- Ha nem tud kódba törni app.tsx, próbálkozzon újra a Csatolás a folyamathoz használatával a hibakereső csatolásához az előző lépésekben leírtak szerint. Győződjön meg arról, hogy a környezet megfelelően van beállítva:
  - Zárja be az összes böngészőpéldányt, beleértve a Chrome-bővítményeket is a Feladatkezelővel. Győződjön meg arról, hogy hibakeresési módban indítja el a böngészőt.
  - Győződjön meg arról, hogy a forrástérképfájl tartalmaz egy hivatkozást ./app.tsx, és nem webpack:///./app.tsx, ami megakadályozza, hogy a Visual Studio hibakeresője megtalálja a app.tsxfájlt.
  Vagy próbálkozzon a debugger; utasítással az app.tsxfájlban, vagy állítson be töréspontokat a Chrome fejlesztői eszközökben vagy a Microsoft Edge F12 eszközeiben.
- Ha nem tud kódba törni a app-bundle.js, távolítsa el a forrástérképfájlt, app-bundle.js.map.

Következő lépések

Az alkalmazás telepítése a Linux App Service-re

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-07-23