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).

Blazor Web Apphibakeresést végezhet a Visual Studióban vagy a Visual Studio Code-ban.

Blazor WebAssembly alkalmazások hibakeresése:

• A Visual Studióban vagy a Visual Studio Code-ban.
• Böngészőfejlesztői eszközök használata Chromium-alapú böngészőkben, beleértve a Microsoft Edge-et, a Google Chrome-ot és a Firefoxot.

A Blazor WebAssembly hibakereséshez elérhető forgatókönyvek a következők:

• Töréspontok beállítása és eltávolítása.
• Futtassa az alkalmazást hibakeresési támogatással az IDE-k használatával.
• Futtassuk lépésenként a kódot.
• IDE-kben a kód futtatásának folytatása egy billentyűparanccsal.
• A Helyiek ablakban figyelje meg a helyi változók értékeit.
• Tekintse meg a hívásvermet, beleértve a JavaScript és a .NET közötti hívásláncokat is.
• A Visual Studio beállításai szerint konfigurált hibakereséshez használjon szimbólumkiszolgálót.

A nem támogatott forgatókönyvek a következők:

• Hibakeresés nem helyi szcenáriókban (például Windows alrendszer Linuxhoz (WSL) vagy Visual Studio Codespaces).
• Hibakeresés a Firefoxban a Visual Studióból vagy a Visual Studio Code-ból.

Előfeltételek

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

Böngésző előfeltételei

A következő böngészők legújabb verziója:

• Google Chrome
• Microsoft Edge
• Firefox (csak böngészőfejlesztői eszközök)

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.

Megjegyzés

A macOS-en futó Apple Safari jelenleg nem támogatott.

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

Blazor Web Apps: Microsoft.AspNetCore.Components.WebAssembly.Server: Egy belső csomagra (Microsoft.NETCore.BrowserDebugHost.Transport) hivatkozik olyan szerelvények esetében, amelyek megosztják a böngésző hibakeresési gazdagépét.

Ö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.

Megjegyzés

A csomagok .NET-alkalmazásokhoz való hozzáadásáról a Csomagok telepítése és kezeléseCsomaghasználati munkafolyamat (NuGet-dokumentáció)című cikkben talál útmutatást. Ellenőrizze a megfelelő csomagverziókat a NuGet.org.

Blazor Web App hibakeresése IDE-ben

Visual Studio

Az ebben a szakaszban szereplő példa feltételezi, hogy létrehozott egy Blazor Web App az Automatikus (Kiszolgáló és WebAssembly) interaktív renderelési módjával és az összetevők közötti interaktivitás helyével.

1. Nyissa meg az alkalmazást.
2. Állítson be töréspontot az ügyfélprojekt (currentCount++;) Counter összetevőjének (Pages/Counter.razor) .Client sorára.
3. Ha a kiszolgálóprojekt ki van választva Megoldáskezelő, nyomja le F5 az alkalmazás hibakeresőben való futtatásához.
4. Nyissa meg a böngészőben a Counter lapot a /countercímen. Várjon néhány másodpercet, amíg a hibakeresési proxy betöltődik és fut. Válassza a Kattintson gombra a töréspont eléréséhez.
5. A Visual Studióban vizsgálja meg a currentCount mező értékét a Helyiek ablakban.
6. A végrehajtás folytatásához nyomja le F5.

A töréspontok statikusan renderelt és interaktív módon renderelt kiszolgálóoldali összetevőkben is megtalálhatók a kiszolgálóprojektben.

1. Állítsa le a hibakeresőt.
2. A kiszolgálóalkalmazásban nyissa meg a statikusan renderelt Weather összetevőt (Components/Pages/Weather.razor), és állítson be töréspontot bárhol a OnInitializedAsync metódusban.
3. Nyomja le F5 az alkalmazás hibakeresőben való futtatásához.
4. A böngészőben lépjen a Weather oldalra a /weathercímen. Várjon néhány másodpercet, amíg a hibakeresési proxy betöltődik és fut. Az alkalmazás végrehajtása a töréspontnál leáll.
5. A végrehajtás folytatásához nyomja le F5.

A töréspontok nem találatot az alkalmazás indításakor, mielőtt a hibakeresési proxy fut. Ide tartoznak a Program fájl töréspontjai, valamint az OnInitialized{Async} életciklus-metódusok töréspontjai, az alkalmazástól kért első oldal által betöltött összetevők.

Visual Studio Code

A jelen szakaszban szereplő példa feltételezi, hogy létrehozott egy Blazor Web App-t egy interaktív Auto (kiszolgálói és WebAssembly) renderelési móddal és összetevőnkénti interaktivitási elhelyezkedéssel.

1. Nyissa meg az alkalmazást a Visual Studio Code-ban a megoldásmappa megnyitásával, amely a kiszolgálót és .Client projektmappát tartalmazó mappát tartalmazza.
2. Állítson be töréspontot az ügyfélprojekt (currentCount++;) Counter összetevőjének (Pages/Counter.razor) .Client sorára.
3. Nyissa meg a Futtatás és hibakeresés panelt, és válassza a Futtatás és hibakeresés gombot. Másik lehetőségként nyomja le F5 (Hibakeresés indítása). Válassza ki a C# hibakeresőt a felhasználói felület tetején található parancskatalógusban. Válassza ki az alapértelmezett profilt a kiszolgálóprojekt számára (például C#:BlazorSample [Default Configuration]).
4. Nyissa meg a böngészőben a Counter lapot a /countercímen. Várjon néhány másodpercet, amíg a hibakeresési proxy betöltődik és fut. Válassza a Kattintson gombra a töréspont eléréséhez.
5. Válassza a Folytatás gombot a felhasználói felületen, vagy nyomja le F5 (Folytatás) billentyűt a végrehajtás folytatásához.

A töréspontok a kiszolgálóprojektben is megtalálhatók.

1. A hibakeresés leállításához válassza a leállítása gombot, vagy nyomja le Shift+F5 a billentyűzeten.
2. A kiszolgálóalkalmazásban nyissa meg a statikusan renderelt Weather összetevőt (Components/Pages/Weather.razor), és állítson be töréspontot bárhol a OnInitializedAsync metódusban.
3. Válassza a Hibakeresés indítása gombot a felhasználói felületen, vagy nyomja le F5 (Hibakeresés indítása) billentyűkombinációt az alkalmazás hibakeresőben való futtatásához.
4. A böngészőben lépjen a Weather oldalra a /weathercímen. Várjon néhány másodpercet, amíg a hibakeresési proxy betöltődik és fut. Az alkalmazás végrehajtása a töréspontnál leáll.
5. Válassza a Folytatás gombot a felhasználói felületen, vagy nyomja le F5 (Folytatás) billentyűt a végrehajtás folytatásához.

A töréspontok nem találatot az alkalmazás indításakor, mielőtt a hibakeresési proxy fut. Ide tartoznak a Program fájl töréspontjai, valamint az OnInitialized{Async} életciklus-metódusok töréspontjai, az alkalmazástól kért első oldal által betöltött összetevők.

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

Visual Studio

1. Nyissa meg az alkalmazást.
2. Állítson be töréspontot a currentCount++; sorban a Counter összetevőn (Pages/Counter.razor).
3. Nyomja le F5 az alkalmazás hibakeresőben való futtatásához.
4. Nyissa meg a böngészőben a Counter lapot a /countercímen. Várjon néhány másodpercet, amíg a hibakeresési proxy betöltődik és fut. Válassza a Kattintson gombra a töréspont eléréséhez.
5. A Visual Studióban vizsgálja meg a currentCount mező értékét a Helyiek ablakban.
6. A végrehajtás folytatásához nyomja le F5.

A töréspontok nem találatot az alkalmazás indításakor, mielőtt a hibakeresési proxy fut. Ide tartoznak a Program fájl töréspontjai, valamint az OnInitialized{Async} életciklus-metódusok töréspontjai, az alkalmazástól kért első oldal által betöltött összetevők.

Visual Studio Code

1. Nyissa meg az alkalmazás mappáját a Visual Studio Code-ban.
2. Állítson be töréspontot a currentCount++; sorban a Counter összetevőn (Pages/Counter.razor).
3. Nyissa meg a Futtatás és hibakeresés panelt, és válassza a Futtatás és hibakeresés gombot. Másik lehetőségként nyomja le F5 (Hibakeresés indítása). Válassza ki a C# hibakeresőt a felhasználói felület tetején található parancskatalógusban. Válassza ki az alapértelmezett profilt (például C#:BlazorSample [Default Configuration]).
4. Nyomja le F5 az alkalmazás hibakeresőben való futtatásához.
5. Elindul az önálló alkalmazás, és megnyílik egy hibakereső böngésző.
6. Nyissa meg a böngészőben a Counter lapot a /countercímen. Várjon néhány másodpercet, amíg a hibakeresési proxy betöltődik és fut. Válassza a Kattintson gombra a töréspont eléréséhez.
7. A végrehajtás folytatásához nyomja le F5.

A töréspontok nem találatot az alkalmazás indításakor, mielőtt a hibakeresési proxy fut. Ide tartoznak a Program fájl töréspontjai, valamint az OnInitialized{Async} életciklus-metódusok töréspontjai, az alkalmazástól kért első oldal által betöltött összetevők.

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).

Opció	Leírás
browser	A hibakeresési munkamenethez elindítandó böngésző. Állítsa edge vagy chromeértékre. Alapértelmezés szerint edge.
cwd	Az alkalmazás elindításához használt munka könyvtár.
request	A launch használatával elindíthat és csatolhat hibakeresési munkamenetet egy Blazor WebAssembly-alkalmazáshoz vagy attach, ha hibakeresési munkamenetet szeretne csatolni egy már futó alkalmazáshoz.
timeout	A hibakeresési munkamenet csatolására váró ezredmásodpercek száma. Alapértelmezés szerint 30 000 milliszekundum (30 másodperc).
trace	Naplók létrehozására szolgál a JS hibakeresőből. Állítsa true-ra a naplók létrehozásához.
url	A böngészőben a hibakereséskor megnyitandó URL-cím.
webRoot	A webkiszolgáló abszolút elérési útját adja meg. Be kell állítani, ha egy alkalmazás egy alútvonalról van kézbesítve.

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ó.

   Megjegyzés

   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).

Blazor WebAssembly-alkalmazás hibakeresése a Firefoxban

Az ebben a szakaszban található útmutatás a Windowson futó Firefoxban Blazor WebAssembly alkalmazások hibakeresésére vonatkozik.

Az Blazor WebAssembly-alkalmazások Firefoxban való hibakereséséhez konfigurálnia kell a böngészőt a távoli hibakereséshez és a böngészőhöz való csatlakozáshoz a böngésző fejlesztői eszközeivel a .NET WebAssembly hibakeresési proxyn keresztül.

Megjegyzés

A Firefoxban a Visual Studióban való hibakeresés jelenleg nem támogatott.

Blazor WebAssembly-alkalmazások hibakeresése a Firefoxban a fejlesztés során:

1. A Firefox konfigurálása:
   • Nyissa meg a about:config egy új böngészőlapon. Olvassa el és zárja be a megjelenő figyelmeztetést.
   • Engedélyezze az devtools.debugger.remote-enabled elemet a Trueértékének beállításával.
   • Engedélyezze az devtools.chrome.enabled elemet a Trueértékének beállításával.
   • Tiltsa le a devtools.debugger.prompt-connection a Falseértékének beállításával.
2. Zárja be az összes Firefox-példányt.
3. Futtassa az alkalmazást egy parancssorban dotnet watch (vagy dotnet run).
4. Indítsa újra a Firefox böngészőt, és lépjen az alkalmazáshoz.
5. Nyissa meg a about:debugging egy új böngészőlapon. Hagyja nyitva ezt a lapot.
6. Lépjen vissza arra a lapra, ahol az alkalmazás fut. Indítsa el a távoli hibakeresést Shift+Alt+dbillentyű lenyomásával.
7. A Debugger lapon nyissa meg a hibakereséshez használt alkalmazás forrásfájlját a file:// csomópont alatt, és állítson be egy töréspontot. Állítson be például egy töréspontot a currentCount++; sorra az IncrementCount összetevő (Counter) Pages/Counter.razor metódusában.
8. Lépjen az Counter összetevő lapjára (/counter) az alkalmazás böngészőlapján, és válassza a számláló gombot a töréspont eléréséhez.
9. A hibakeresési lapon a végrehajtás folytatásához nyomja le F5.

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.

Figyelmeztetés

A biztonsági rések elkerülése érdekében körültekintően kell módosítani a tűzfalkonfigurációt. Körültekintően alkalmazza a biztonsági útmutatást, kövesse az ajánlott biztonsági eljárásokat, és tartsa tiszteletben a tűzfal gyártója által kiadott figyelmeztetéseket.

Nyílt kommunikáció engedélyezése a NodeJS folyamattal:

• Megnyitja a csomópontkiszolgálót a tűzfal képességeitől és konfigurációjától függően bármilyen kapcsolathoz.
• A hálózattól függően kockázatos lehet.
• Csak fejlesztői gépeken ajánlott.

Engedélyezze, ha lehetséges, csak a folyamattal való nyílt kommunikációt megbízható vagy privát hálózatokon.

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.