ASP.NET Core-alkalmazások hibakeresése

Ez a cikk az Blazor alkalmazások hibakeresését ismerteti, beleértve Blazor WebAssembly alkalmazások hibakeresését böngészőfejlesztői eszközökkel vagy integrált fejlesztői környezettel (IDE).

Előfeltételek

Ez a szakasz a hibakeresés előfeltételeit ismerteti.

Böngésző előfeltételei

Győződjön meg arról, hogy a tűzfalak vagy proxyk nem blokkolják a hibakeresési proxyval való kommunikációt (NodeJS folyamat). További információt a tűzfal konfigurációs című szakaszban talál.

IDE előfeltételek

A Visual Studio vagy a Visual Studio Code legújabb verziójára van szükség.

A Visual Studio Code előfeltételei

A Visual Studio Code használatához a Visual Studio Code C# fejlesztői készlete szükséges (A C# használatának első lépései a VS Code). A Visual Studio Code Extensions Marketplace-en szűrje a bővítménylistát a "c# dev kit" kifejezéssel a bővítmény megkereséséhez:

A C# Dev Kit telepítése automatikusan telepíti a következő bővítményeket:

• .NET telepítőeszköz
• C#
• IntelliCode for C# Dev Kit

Ha figyelmeztetéseket vagy hibákat tapasztal, megnyithat egy problémát (microsoft/vscode-dotnettools GitHub-adattárat), amely leírja a problémát.

Alkalmazáskonfiguráció előfeltételei

Az alszakasz útmutatása az ügyféloldali hibakeresésre vonatkozik.

Nyissa meg az indítási projekt Properties/launchSettings.json fájlját. Ellenőrizze, hogy a következő inspectUri tulajdonság szerepel-e a fájl profiles csomópontjának minden indítási profiljában. Ha a következő tulajdonság nincs jelen, vegye fel az egyes profilokbe:

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"

A inspectUri tulajdonság:

• Lehetővé teszi az IDE számára, hogy észlelje, hogy az alkalmazás egy Blazor alkalmazás.
• Utasítja a szkript hibakeresési infrastruktúráját, hogy Blazorhibakeresési proxyján keresztül csatlakozzon a böngészőhöz.

A WebSocket protokoll helyőrző értékeit (wsProtocol), a gazdagép (url.hostname), a port (url.port) és a böngészőben található felügyelő URI-t (browserInspectUri) a keretrendszer biztosítja.

Csomagok

Önálló Blazor WebAssembly: Microsoft.AspNetCore.Components.WebAssembly.DevServer: Fejlesztési kiszolgáló Blazor alkalmazások létrehozásakor. Belsőleg hívja a UseWebAssemblyDebugging köztes szoftver hozzáadásához és a Blazor WebAssembly alkalmazások hibakereséséhez a Chromium fejlesztői eszközein belül.

Blazor WebAssembly-alkalmazások hibakeresése IDE-ben

<DebuggerSupport>true</DebuggerSupport>
<CopyOutputSymbolsToPublishDirectory>true</CopyOutputSymbolsToPublishDirectory>

Csatolás meglévő Visual Studio Code hibakeresési munkamenethez

Futó Blazor alkalmazáshoz való csatoláshoz nyissa meg a .vscode/launch.json fájlt, és cserélje le a {URL} helyőrzőt az alkalmazás futtatásának URL-címére:

{
  "name": "Attach and Debug",
  "type": "blazorwasm",
  "request": "attach",
  "url": "{URL}"
}

A Visual Studio Code indítási beállításai

Az alábbi táblázatban szereplő indítási konfigurációs beállítások támogatottak az blazorwasm hibakeresési típushoz (.vscode/launch.json).

Hibakeresés a(z) Blazor WebAssembly a Google Chrome vagy a Microsoft Edge használatával

Az ebben a szakaszban található útmutató az alábbi Blazor WebAssembly alkalmazások hibakeresésére vonatkozik:

• Windows vagy macOS rendszeren futó Google Chrome.
• Windows rendszeren futó Microsoft Edge.

1. Futtassa az alkalmazást egy parancssorban dotnet watch (vagy dotnet run).

2. Nyisson meg egy böngészőt, és keresse meg az alkalmazás URL-címét.

3. Indítsa el a távoli hibakeresést az alábbiak lenyomásával:

   • Shift+Alt+d a Windows rendszerben.
   • Shift+⌘+d macOS rendszeren.

   A böngészőnek futnia kell engedélyezett távoli hibakereséssel, ez nem az alapértelmezett beállítás. Ha a távoli hibakeresés le van tiltva, megjelenik egy "Nem található hibakereső böngészőlap" hibaoldal, amely tartalmazza a böngésző megnyitására vonatkozó utasításokat a hibakeresési port megnyitásával. Kövesse a böngésző utasításait.

   Miután követte a távoli hibakeresés engedélyezésére vonatkozó utasításokat, az alkalmazás megnyílik egy új böngészőablakban. Indítsa el a távoli hibakeresést a Gyorsbillentyű kombináció lenyomásával az új böngészőablakban:

   • Shift+Alt+d a Windows rendszerben.
   • Shift+⌘+d macOS rendszeren.

   Megnyílik egy új böngészőfül a fejlesztői eszközökkel, amelyen az alkalmazás szellemképe látható.

   Jegyzet

   Ha követte az utasításokat, hogy nyisson meg egy új böngészőlapot, amelyen engedélyezve van a távoli hibakeresés, bezárhatja az eredeti böngészőablakot, így a második ablak nyitva marad az alkalmazás első lapjával, a második pedig a hibakeresővel.

4. A Források lapon megjelenik az alkalmazás .NET-szerelvényeinek és lapjainak listája.

5. Nyissa meg a file:// csomópontot. Az összetevőkódban (.razor fájlokban) és a C# kódfájlokban (.cs) az alkalmazás böngészőlapján a kód végrehajtásakor beállított töréspontok jelennek meg (a kezdeti lap a távoli hibakeresés indítása után nyílik meg). A töréspont elérése után lépésenként (F10) lépkedhet a kódon vagy folytathatja (F8) a kód végrehajtását a hibakeresési lapon általában.

A Chromium-alapú böngészők hibakereséséhez a Blazor egy hibakeresési proxyt biztosít, amely implementálja a Chrome DevTools Protocol-t, és a protokollt .NET-specifikus információkkal bővíti. Amikor a hibakeresési billentyűparancsot lenyomják, a Blazor a Chrome Fejlesztői Eszközöket a proxyhoz irányítja. A proxy csatlakozik a hibakereséshez használt böngészőablakhoz (ezért engedélyezni kell a távoli hibakeresést).

Nem kezelt kivételek megszakítása

A hibakereső nem áll meg a nem kezelt kivételeknél, mert a Blazor elkapja a fejlesztői kód által nem kezelt kivételeket.

A kezeletlen kivételek megszakítása:

• Nyissa meg a hibakereső kivételbeállításait (Hibakeresés>Windows>Kivételbeállítások) a Visual Studióban.
• Adja meg a következő JavaScript-kivételek beállításait:
  • Minden kivétel
  • Nem merülő kivételek

Böngésző forrástérképei

A böngésző forrástérképei lehetővé teszik, hogy a böngésző visszaképozza a lefordított fájlokat az eredeti forrásfájljaira, és gyakran használják az ügyféloldali hibakereséshez. Blazor azonban jelenleg nem fordítja le a C#-et JavaScript/WASM-re. Ehelyett Blazor il-értelmezést végez a böngészőben, így a forrástérképek nem relevánsak.

Tűzfalkonfiguráció

Ha egy tűzfal blokkolja a hibakeresési proxyval folytatott kommunikációt, hozzon létre egy tűzfalkivételi szabályt, amely lehetővé teszi a böngésző és a NodeJS folyamat közötti kommunikációt.

A Windows tűzfal konfigurációs útmutatója: Bejövő program vagy szolgáltatásszabály létrehozása. További információért lásd a Windows Defender tűzfal fejlett biztonsági funkciókkal és a kapcsolódó cikkeket a Windows tűzfal dokumentációs készletében.

Hibaelhárítás

Ha hibákba ütközik, az alábbi tippek segíthetnek:

• Töréspontok eltávolítása:
  • Google Chrome: A Hibakereső lapon nyissa meg a fejlesztői eszközöket a böngészőben. A konzolon hajtsa végre a localStorage.clear() a töréspontok eltávolításához.
  • Microsoft Edge: Az Alkalmazás lapon nyissa meg Helyi tároló. Kattintson a jobb gombbal a webhelyre, és válassza a Törléslehetőséget.
• Győződjön meg arról, hogy telepítette és megbízhatónak látta a ASP.NET Core HTTPS fejlesztési tanúsítványt. További információ: HTTPS használatának kényszerítése az ASP.NET Core-ban.
• A Visual Studio megköveteli az A JavaScript hibakeresés engedélyezése ASP.NET-hez (Chrome és Edge) opciót a Eszközök>Beállítások>Hibakeresés>Általános. Ez a Visual Studio alapértelmezett beállítása. Ha a hibakeresés nem működik, győződjön meg arról, hogy a beállítás be van jelölve.
• Ha a környezet HTTP-proxyt használ, győződjön meg arról, hogy localhost szerepel a proxy megkerülő beállításai között. Ezt úgy teheti meg, hogy a NO_PROXY környezeti változót a következőben állítja be:
  • A projekt launchSettings.json fájlja.
  • A felhasználói vagy a rendszerkörnyezeti változók szintjén minden alkalmazásra alkalmazni kell. Környezeti változó használatakor indítsa újra a Visual Studiót a módosítás érvénybe lépéséhez.
• Győződjön meg arról, hogy a tűzfalak vagy proxyk nem blokkolják a hibakeresési proxyval való kommunikációt (NodeJS folyamat). További információt a tűzfal konfigurációs című szakaszban talál.

A OnInitialized{Async} pontban lévő töréspontokat nem éri el.

A Blazor keretrendszer hibakeresési proxyja nem indul el azonnal az alkalmazás indításakor, ezért előfordulhat, hogy a OnInitialized{Async} életciklus-metódusok töréspontjai nem. Javasoljuk, hogy a metódus törzsének elején adjon hozzá egy késleltetést, hogy a hibakeresési proxy elindulhasson, mielőtt a töréspontot elérik. A késést egy if fordító irányelv alapján is megadhatja, hogy a késés ne legyen jelen az alkalmazás kiadási buildjén.

OnInitialized:

protected override void OnInitialized()
{
#if DEBUG
    Thread.Sleep(10000);
#endif

    ...
}

OnInitializedAsync:

protected override async Task OnInitializedAsync()
{
#if DEBUG
    await Task.Delay(10000);
#endif

    ...
}

Visual Studio (Windows) időtúllépés

Ha a Visual Studio egy kivételt dob, hogy a hibakeresési adapter nem indult el, és hogy az időtúllépés megtörtént, akkor az időtúllépést a rendszerleíró adatbázis beállításával módosíthatja:

VsRegEdit.exe set "<VSInstallFolder>" HKCU JSDebugger\Options\Debugging "BlazorTimeoutInMilliseconds" dword {TIMEOUT}

Az előző parancs {TIMEOUT} helyőrzője ezredmásodpercben van. Például egy perc van hozzárendelve 60000-hoz.