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.

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 válassza az Eszközök>Beállítások>Hibakeresésilehetőséget, majd válassza a JavaScript-hibakeresés engedélyezése ASP.NET (Chrome, Edge és IE).

  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.

• Az Node.js alkalmazásokhoz és más JavaScript-projektekhez kövesse az ebben a cikkben leírt lépéseket.

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

Ha a forrást egy olyan segédpilóta hozza létre, mint a TypeScript vagy a Babel, használja 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özöket vagy a Microsoft Edge-hez készült F12-eszközöket használni.

Ha segítségre van szüksége a forrástérképek létrehozásához, olvassa el a Forrástérképek létrehozása hibakeresésicímű témakört.

A böngésző előkészítése hibakeresésre

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

   vagy

   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

Töréspontok és forrástérképek hibaelhárítása

Ha egy TypeScript- vagy JSX-forrásfájlban a kódba kell belépnie, és ezt nem tudja megtenni, az előző szakaszban leírtak szerint használja a Processzhez csatolás lehetőséget a hibakereső csatolásához. 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ő használatával), hogy hibakeresési módban futtathassa a böngészőt.

• Győződjön meg arról, hogy hibakeresési módban elindítani a böngészőt.

• Győződjön meg arról, hogy a forrástérképfájl tartalmazza a forrásfájl megfelelő relatív elérési útját, és hogy nem tartalmaz olyan nem támogatott előtagokat, mint például a webpack:///, ami megakadályozza, hogy a Visual Studio hibakeresője a forrásfájlt keresse. Előfordulhat például, hogy egy webpack:///.app.tsx-hez hasonló hivatkozás így módosul: ./app.tsx. Ezt manuálisan is megteheti a forrástérképfájlban (ami a teszteléshez hasznos), vagy egy egyéni buildkonfiguráción keresztül. További információ: Forrástérképek létrehozása a hibakereséshez.

Másik lehetőségként, ha kódba kell törnie egy forrásfájlban (például app.tsx), és nem tudja megtenni, próbálkozzon a forrásfájlban található debugger; utasítással, vagy állítson be töréspontokat a Chrome Developer Tools (vagy a Microsoft Edge F12 Tools) eszközben.

Forrástérképek létrehozása hibakereséshez

A Visual Studio képes a Forrástérképek JavaScript-forrásfájlokon való használatára és létrehozására. Erre gyakran szükség van, ha a forráskód minifikált, vagy transzpilerrel, például TypeScript-tel vagy Babel-lel jött létre. Az elérhető lehetőségek a projekt típusától függenek.

• A Visual Studio TypeScript-projektje alapértelmezés szerint forrásleképezéseket hoz létre Önnek. További információ: Forrástérképek konfigurálása tsconfig.json fájlhasználatával.

• JavaScript-projektekben forrástérképeket hozhat létre egy csomagkötegető, például a webpack és egy olyan fordító használatával, mint a TypeScript-fordító (vagy a Babel), amelyet hozzáadhat a projekthez. A TypeScript-fordítóhoz hozzá kell adnia egy tsconfig.json fájlt is, és be kell állítania a sourceMap fordítóbeállítást. Egy példa, amely bemutatja, hogyan teheti ezt meg egy alapszintű webpack-konfigurációval, olvassa el Node.js-alkalmazás létrehozása a Reacthasználatával.

Ha speciális beállításokat szeretne konfigurálni a forrástérképekhez, használjon egy tsconfig.json vagy egy TypeScript-projekt projektbeállítását, de mindkettőt nem.

Ha engedélyezni szeretné a hibakeresést a Visual Studióval, győződjön meg arról, hogy a forrásfájlra mutató hivatkozás(ok) helyesek a létrehozott forrástérképen (ez tesztelést igényelhet). Ha például webpackot használ, a forrásleképezés fájlban található hivatkozások tartalmazzák a webpack:/// előtagot, amely megakadályozza, hogy a Visual Studio typeScript- vagy JSX-forrásfájlt keressen. Ha ezt hibakeresési célból módosítja, a forrásfájlra mutató hivatkozást (például app.tsx) az webpack:///./app.tsx-ről olyanra kell változtatni, mint a ./app.tsx. Ezáltal lehetővé válik a hibakeresés, mivel az elérési út relatív a forrásfájlhoz képest. Az alábbi példa bemutatja, hogyan konfigurálhatja a forrástérképeket a webpackben, amely az egyik leggyakoribb kötegelő, így azok együttműködnek a Visual Studióval.

(Csak Webpack) Ha a töréspontot JSX-fájl TypeScript-fájljában állítja be (nem lefordított JavaScript-fájlban), frissítenie kell a webpack konfigurációját. Előfordulhat például, hogy a webpack-config.jsa következő kódot kell lecserélnie:

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

a következő kóddal:

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

Ez egy csak fejlesztésre alkalmas beállítás, amely lehetővé teszi az ügyféloldali kód hibakeresését a Visual Studióban.

Bonyolult forgatókönyvek esetén a böngészőeszközök (F12) néha a legjobban működnek a hibakereséshez, mivel nem igényelnek módosításokat az egyéni előtagokon.

Forrástérképek konfigurálása tsconfig.json fájl használatával

Ha tsconfig.json fájlt ad hozzá a projekthez, a Visual Studio TypeScript-projektként kezeli a címtárgyökereket. A fájl hozzáadásához kattintson a jobb gombbal a projektre a Megoldáskezelőben, majd válassza > Új elem hozzáadása > TypeScript JSON-konfigurációs fájllehetőséget. A következőhöz hasonló tsconfig.json fájl lesz hozzáadva a projekthez.

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

Fordítási beállítások tsconfig.json fájlhoz

• InlineSourceMap: Egyetlen fájlt állít elő forrástérképpel ahelyett, hogy minden forrásfájlhoz külön forrástérképet hozna létre.
• beágyazottforrás-: A forrástérképek mellett egyetlen fájlban bocsátja ki a forrást; inlineSourceMap vagy sourceMap beállítását igényli.
• mapRoot: Azt a helyet adja meg, ahol a hibakeresőnek az alapértelmezett hely helyett forrástérképfájlokat (.map) kell keresnie. Ezt a jelzőt akkor használja, ha a futásidejű .map fájloknak más helyen kell lenniük, mint a .js fájloknak. A megadott hely beágyazva van a forrástérképbe, hogy a hibakeresőt a .map fájlok helyére irányítsa.
• sourceMap: Létrehoz egy megfelelő .map fájlt.
• sourceRoot: Azt a helyet adja meg, ahol a hibakeresőnek TypeScript-fájlokat kell keresnie a forráshelyek helyett. Ezt a jelzőt akkor használja, ha a futásidejű forrásoknak más helyen kell lenniük, mint a tervezéskor. A megadott hely beágyazva van a forrástérképbe, hogy a hibakeresőt oda irányítsa, ahol a forrásfájlok találhatók.

A fordító beállításairól a TypeScript-kézikönyv Fordító beállításai oldalon talál további információt.

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

Kapcsolódó tartalom

Tulajdonságok, React, Angular, Vue