JavaScript- vagy TypeScript-alkalmazás hibakeresése a Visual Studióban

JavaScript- és TypeScript-kód hibakeresését a Visual Studio használatával végezheti el. Feltörheti a töréspontokat, csatolhatja a hibakeresőt, megvizsgálhatja a változókat, megtekintheti a hívásvermet, és más hibakeresési funkciókat is használhat.

Tip

Ha még nem telepítette a Visual Studiót, lépjen a Visual Studio letöltési lapjára, és telepítse ingyenesen.

Hibakeresés konfigurálása

A Visual Studio 2022-ben .esproj-projektek esetében a Visual Studio Code egy launch.json fájllal konfigurálja és testre szabja a hibakeresőt. launch.json hibakereső konfigurációs fájl.

A Visual Studio csak felhasználói kódhoz csatolja a hibakeresőt. Az .esproj-projektek esetében a Visual Studióban a skipFilesbeállítással konfigurálhatja a felhasználói kódot (más néven Just My Code beállításokat). Ez ugyanúgy működik, mint a VS Code launch.json beállításai. A skipFiles és más hibakereső konfigurációs opciókkal kapcsolatos további információkért lásd a Érdektelen kódok kihagyása és az Indítási konfigurációs attribútumokcímű részeket.

Kiszolgálóoldali szkript hibakeresése

1. Megnyitott projekttel a Visual Studióban, nyisson meg egy kiszolgálóoldali JavaScript-fájlt (például server.js), kattintson a szegélyre egy töréspont beállításához.

   

   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üggesztse fel a futó kódot, hogy megtekinthesse a változók értékeit, a memória viselkedését, vagy azt, hogy a kód egy ága fut-e.

2. Az alkalmazás futtatásához nyomja le F5 (Hibakeresés>Hibakeresés indítása).

   A hibakereső a beállított töréspontnál szünetel (az IDE kiemeli az utasítást a sárga háttérben). Most megvizsgálhatja az alkalmazás állapotát, ha a hatókörben lévő változókra mutat, például a Helyiek és Watch ablakokat használva.

   

3. Az alkalmazás folytatásához nyomja le F5.

4. Ha a Chrome fejlesztői eszközeit szeretné használni, nyomja le F12 a Chrome böngészőben. Ezekkel az eszközökkel megvizsgálhatja a DOM-ot, vagy használhatja az alkalmazást a JavaScript-konzolon.

Ügyféloldali szkript hibakeresése

A Visual Studio csak a Chrome és a Microsoft Edge esetében nyújt ügyféloldali hibakeresési támogatást. Bizonyos esetekben a hibakereső automatikusan eléri a töréspontokat JavaScript- és TypeScript-kódban, valamint HTML-fájlok beágyazott szkriptjeiben.

• Az ügyféloldali szkriptek ASP.NET alkalmazásokban való hibakereséséhez nyissa meg az Eszközök>beállításai panelt, és bontsa ki a Minden beállítás>hibakeresése általános szakaszt>. Válassza az JavaScript hibakeresés engedélyezésének opcióját ASP.NET-hez (Chrome és Edge).

  Ha a Chrome Developer Tools vagy a Microsoft Edge F12 Tools eszközét szeretné használni az ügyféloldali szkriptek hibakereséséhez, tiltsa le ezt a beállítást.

  További információt a Google Chromeblogbejegyzésében talál. A TypeScript hibakeresése a ASP.NET Core-ban: TypeScript hozzáadása meglévő ASP.NET Core-alkalmazáshoz.

• A Visual Studio 2022-ben a .esproj projektek esetében standard hibakeresési módszerek használatával érheti el az ügyféloldali szkriptek töréspontjait. A hibakeresés konfigurálásához módosíthatja launch.json beállításait, amelyek ugyanúgy működnek, mint a VS Code-ban. A hibakereső konfigurációs beállításairól további információt a Konfigurációs attribútumok indítása című témakörben talál.

Note

Az ASP.NET és ASP.NET Core esetében a beágyazott szkriptek hibakeresése a .CSHTML fájlokban nem támogatott. A hibakeresés engedélyezéséhez a JavaScript-kódnak külön fájlokban kell lennie.

Az alkalmazás előkészítése hibakeresésre

Ha a forrást a TypeScripthez vagy a Babelhez hasonló transzpilerek minifikálják vagy hozzák létre, használja a forrástérképeket a legjobb hibakeresési élmény érdekében. A hibakeresőt a forrástérképek nélkül is csatolhatja egy futó ügyféloldali szkripthez. Előfordulhat azonban, hogy csak a minified vagy transpiled fájlban tud töréspontokat beállítani és elérni, a forrásfájlban nem. Egy Vue.js alkalmazásban például a rendszer sztringként továbbítja a minified szkriptet egy eval utasításnak, és a Visual Studio hibakeresőjével nem lehet hatékonyan végiglépkedni ezen a kódon, hacsak nem használ forrástérképeket. Összetett hibakeresési forgatókönyvek esetén érdemes lehet inkább a Chrome fejlesztői eszközeit vagy a Microsoft Edge F12-eszközeit használni.

A böngésző manuális konfigurálása hibakereséshez

A Visual Studio 2022-ben az ebben a szakaszban ismertetett eljárás csak ASP.NET és ASP.NET Core-alkalmazásokban érhető el. Ez csak olyan gyakori helyzetekben szükséges, ahol testre kell szabnia a böngésző beállításait. Az .esproj-projektekben a böngésző alapértelmezés szerint hibakeresésre van konfigurálva.

Ebben a forgatókönyvben használja a Microsoft Edge-et vagy a Chrome-ot.

1. Zárja be a célböngésző összes ablakát, akár a Microsoft Edge-, akár a Chrome-példányokat.

   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. (Előfordulhat, hogy a böngészőbővítmények futnak, és elfogják a teljes hibakeresési módot, ezért előfordulhat, hogy meg kell nyitnia a Feladatkezelőt a Chrome vagy az Edge váratlan példányainak megkereséséhez és bezárásához.)

   A legjobb eredmény érdekében állítsa le a Chrome összes példányát, még akkor is, ha a Microsoft Edge-et használja. Mindkét böngésző ugyanazt a krómkódbázist használja.

2. Indítsa el a böngészőt úgy, hogy engedélyezve van a hibakeresés.

   A Visual Studio 2019-től kezdve beállíthatja a --remote-debugging-port=9222 jelzőt a böngésző indításakor, ha a Böngészés ezzel...> lehetőséget választja a Debug eszköztár eszköztáron.

   

   Ha nem látja a Tallózás a következővel... parancsot a Hibakeresés eszköztáron, válasszon egy másik böngészőt, majd próbálkozzon újra.

   A Tallózás párbeszédablakból válassza a hozzáadásalehetőséget, majd állítsa be a zászlót az Argumentumok mezőben. Használjon más felhasználóbarát nevet a böngészőnek, például Edge hibakeresési módot vagy Chrome Hibakeresési módot. További részletekért lásd a Kiadási megjegyzések.

   

   Válassza a Tallózás lehetőséget, ha hibakeresési módban szeretné elindítani az alkalmazást a böngészővel.

   Alternatívaként nyissa meg a Futtatás parancsot a Windows Start gombra (kattintson a jobb gombbal, és válassza a Futtatás), és írja be a következő parancsot:

   msedge --remote-debugging-port=9222

   or,

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

   Ezzel elindítja a böngészőt, ha engedélyezve van a hibakeresés.

   Az alkalmazás még nem fut, ezért üres böngészőlapot kap. (Ha a böngészőt a Futtatás paranccsal indítja el, be kell illesztenie az alkalmazáspéldány megfelelő URL-címét.)

A hibakereső csatolása ügyféloldali szkripthez

Bizonyos esetekben előfordulhat, hogy a hibakeresőt egy futó alkalmazáshoz kell csatolnia.

Ahhoz, hogy a hibakeresőt a Visual Studióból csatolja, és töréspontokat találjon az ügyféloldali kódban, segítségre van szüksége a megfelelő folyamat azonosításához. Így engedélyezheti.

1. Győződjön meg arról, hogy az alkalmazás hibakeresési módban fut a böngészőben az előző szakaszban leírtak szerint.

   Ha ismerős névvel hozott létre böngészőkonfigurációt, válassza ezt a hibakeresési célként, majd nyomja le a Ctrl+F5 (Debug>Indítás hibakeresés nélkül) billentyűkombinációt az alkalmazás böngészőben való futtatásához.

2. Váltson a Visual Studióra, majd állítson be egy töréspontot a forráskódban, amely lehet JavaScript-fájl, TypeScript-fájl vagy JSX-fájl. (Állítsa be a töréspontot egy kódsorba, amely lehetővé teszi a töréspontokat, például a visszatérési utasítást vagy a var deklarációt.)

   

   Ha egy lefordított fájlban szeretné megtalálni az adott kódot, használja a Ctrl+F (Szerkesztés>Keresés és csere>Gyorskeresés).

   Ügyféloldali kód esetén a TypeScript-fájlban, .vuevagy JSX fájlban található töréspont eléréséhez általában forrásleképekkell használni. A Visual Studióban a hibakeresés támogatásához helyesen kell konfigurálni a forrástérképet.

3. Válassza a(z) Hibakeresés>Folyamathoz csatoláslehetőséget.

   Tip

   A Visual Studio 2017-től kezdve, miután az első alkalommal az alábbi lépések végrehajtásával csatolta a folyamathoz, gyorsan újra csatlakozhat ugyanahhoz a folyamathoz, ha a Hibakeresés>Újracsatlakozás a folyamathozlehetőséget választja.

4. A Csatolás a folyamathoz párbeszédpanelen válassza a „JavaScript és TypeScript (Chrome Dev Tools/V8 Inspector)” lehetőséget a kapcsolattípusbeállításához.

   A hibakeresési célnak (például http://localhost:9222) meg kell jelennie a Kapcsolódási cél mező részében.

5. A böngészőpéldányok listájában válassza ki a megfelelő gazdagépporttal rendelkező böngészőfolyamatot (ebben az esetbenhttps://localhost:7184/), majd kattintson a Csatoláselemre.

   Előfordulhat, hogy a port (például 7184) a Cím mezőben is megjelenik, hogy segítsen kiválasztani a megfelelő böngészőpéldányt.

   Az alábbi példa bemutatja, hogyan néz ki ez a Microsoft Edge böngészőben.

   

   Tip

   Ha a hibakereső nem csatlakozik, és a következő üzenet jelenik meg: "Nem sikerült elindítani a hibakereső adaptert" vagy "Nem sikerült csatolni a folyamathoz. A művelet az aktuális állapotban nem legális." A Windows Feladatkezelővel zárja be a célböngésző összes példányát, mielőtt hibakeresési módban indítja el 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.

6. Előfordulhat, hogy a törésponttal rendelkező kódot már végrehajtották, frissítse a böngészőlapot. Ha szükséges, tegye meg a szükséges lépéseket, hogy a töréspontot tartalmazó kód végrehajtásra kerüljön.

   A hibakeresőben szüneteltetve az alkalmazás állapotát úgy vizsgálhatja meg, hogy változók fölé viszi az egérmutatót, és hibakereső ablakokat használ. A hibakeresőt a kódon lépésről lépésre haladva (F5, F10és F11) léptetheti előre. További információ az alapvető hibakeresési funkciókról: Először tekintse meg a hibakeresőt.

   Az alkalmazás típusától, a korábban követett lépésektől és más tényezőktől, például a böngésző állapotától függően előfordulhat, hogy egy lefordított .js fájlban vagy forrásfájlban eléri a töréspontot. Akárhogy is, végiglépkedhet a kódon, és megvizsgálhatja a változókat.

   • Ha typeScript-, JSX- vagy .vue forrásfájlban kell kódba törnie, és nem tudja megtenni, győződjön meg arról, hogy a környezet megfelelően van beállítva a VS Code dokumentációjának Forrástérképek szakaszában leírtak szerint.

   • Ha kódba kell törnie egy lefordított JavaScript-fájlban (például app-bundle.js), és nem tudja megtenni, távolítsa el a forrásleképezési fájlt, filename.js.map.

JavaScript hibakeresése dinamikus fájlokban a Razor használatával (ASP.NET)

A Visual Studio 2022-ben töréspontok használatával hibakeresést végezhet a Razor-lapokban. További információ: Hibakeresési eszközök használata a Visual Studio.

Kapcsolódó tartalom

Tulajdonságok, React, Angular, Vue