Ladění ASP.NET Core Blazor WebAssembly

  • Článek
  • 19 min ke čtení

Blazor WebAssemblyAplikace je možné ladit pomocí vývojářových nástrojů prohlížeče v Chromium prohlížečích (Edge/Chrome). Aplikaci můžete také ladit pomocí následujících integrovaných vývojových prostředí (ICE):

  • Visual Studio
  • Visual Studio pro Mac
  • Visual Studio Code

Mezi dostupné scénáře patří:

  • Nastavte a odeberte zarážky.
  • Spusťte aplikaci s podporou ladění v prostředích ID.
  • Kód si projdete jedním krokem.
  • Obnovte spouštění kódu pomocí klávesové zkratky v prostředích ID.
  • V okně Místní hodnoty sledujte hodnoty místních proměnných.
  • Podívejte se na zásobník volání, včetně řetězců volání mezi JavaScriptem a .NET.

Pro teď nemůžete:

  • Přerušení u neošetřených výjimek.
  • Než bude spuštěn ladicí proxy server, stiskněte během spouštění aplikace zarážky. To zahrnuje zarážky v a zarážky v metodách životního cyklu komponent, které jsou načteny první stránkou Program.cs požadovanou OnInitialized{Async} z aplikace.
  • Ladění v jiných než místních scénářích (například Subsystém Windows pro Linux (WSL) nebo Visual Studio Codespaces).
  • Automaticky znovu sestaví Server back-endové aplikace hostovaného řešení během ladění, například spuštěním Blazor WebAssembly aplikace pomocí dotnet watch run .

Požadavky

Ladění vyžaduje některý z následujících prohlížečů:

  • Google Chrome (verze 70 nebo novější) (výchozí)
  • Microsoft Edge (verze 80 nebo novější)

Ujistěte se, že brány firewall nebo proxy servery neblokují komunikaci s ladicím proxy serverem ( NodeJS proces). Další informace najdete v části Konfigurace brány firewall.

Visual Studio Code uživatelé vyžadují následující rozšíření:

Po otevření projektu v VS Code se může zobrazit oznámení, že k povolení ladění se vyžaduje další nastavení. V případě potřeby nainstalujte požadovaná rozšíření z Visual Studio Marketplace. Pokud chcete zkontrolovat nainstalovaná rozšíření, otevřete na řádku nabídek Zobrazit rozšíření nebo vyberte ikonu Rozšíření na > bočním panelu Aktivita.

Visual Studio pro Mac vyžaduje verzi 8.8 (build 1532) nebo novější:

  1. Nainstalujte nejnovější verzi služby Visual Studio pro Mac výběrem tlačítka Stáhnout Visual Studio pro Mac v Microsoftu: Visual Studio pro Mac.
  2. Vyberte kanál Preview v rámci Visual Studio. Další informace najdete v tématu Instalace verze Preview Visual Studio pro Mac.

Poznámka

Apple Safari v macOS se v současné době nepodporuje.

Ladění samostatné Blazor WebAssembly aplikace

Pokud chcete povolit ladění pro existující aplikaci, aktualizujte soubor v projektu po spuštění tak, aby v každém profilu spuštění zahrnoval Blazor WebAssembly launchSettings.json následující inspectUri vlastnost:

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

Po aktualizaci by launchSettings.json měl soubor vypadat podobně jako v následujícím příkladu:

{
    "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
        "applicationUrl": "http://localhost:50454",
        "sslPort": 44399
      }
    },
    "profiles": {
      "IIS Express": {
        "commandName": "IISExpress",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      },
      "BlazorApp1.Server": {
        "commandName": "Project",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "applicationUrl": "https://localhost:5001;http://localhost:5000",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      }
    }
  }

Vlastnost inspectUri :

  • Umožňuje integrovaného vývojového prostředí zjistit, že aplikace je Blazor WebAssembly aplikace.
  • Instruuje infrastrukturu ladění skriptů pro připojení k prohlížeči prostřednictvím Blazor ladicího proxy serveru.

Rozhraní poskytuje zástupné hodnoty pro protokol WebSocket ( ), hostitele ( ), port ( ) a identifikátor URI inspektoru ve wsProtocol url.hostname url.port browserInspectUri spuštěném prohlížeči ( ).

Ladění aplikace Blazor WebAssembly v Visual Studio:

  1. Vytvořte nové hostované Blazor WebAssembly řešení.

  2. Když je Server projekt vybraný v Průzkumník řešení, stisknutím klávesy F5 spusťte aplikaci v ladicím programu.

    Poznámka

    Při ladění pomocí prohlížeče založeného na Chromium, jako je Google Chrome nebo Microsoft Edge, se může otevřít nové okno prohlížeče s odděleným profilem pro relaci ladění místo otevření karty v existujícím okně prohlížeče s profilem uživatele. Pokud je ladění s profilem uživatele povinné, přistupte k jednomu z následujících přístupů:

    • Před stisknutím klávesy F5 zavřete všechny otevřené instance prohlížeče a spusťte ladění.
    • Nakonfigurujte Visual Studio, aby se prohlížeč spouštěl s profilem uživatele. Další informace o tomto přístupu najdete v tématu Ladění WASM ve VS spustí Edge s odděleným adresářem uživatelských dat Blazor (dotnet/aspnetcore #20915).

    Poznámka

    Spuštění bez ladění (Ctrl + F5) se nepodporuje. Když se aplikace spustí v konfiguraci ladění, režie ladění vždy vede k malému snížení výkonu.

  3. V aplikaci *Client* nastavte zarážku na řádku currentCount++; v Pages/Counter.razor .

  4. V prohlížeči přejděte na Counter stránku a výběrem tlačítka Click me (Klikněte na mě) přejděte na zarážku.

  5. V Visual Studio zkontrolujte hodnotu pole v currentCount okně Místní hodnoty.

  6. Pokračujte v provádění stisknutím klávesy F5.

Při ladění Blazor WebAssembly aplikace můžete také ladit kód serveru:

  1. Nastavte zarážku na Pages/FetchData.razor stránce v OnInitializedAsync .
  2. Nastavte zarážku v WeatherForecastController metodě Get v akci.
  3. Přejděte na stránku a těsně před tím, než vydá požadavek HTTP na server, přejděte k první Fetch Data FetchData zarážce v komponentě.
  4. Stisknutím klávesy F5 pokračujte v provádění a potom na serveru v nástroji stiskněte zarážku. WeatherForecastController
  5. Znovu stiskněte klávesu F5, abyste mohli pokračovat v provádění a podívat se na tabulku předpovědi počasí vykreslenou v prohlížeči.

Poznámka

Během spouštění aplikace se zarážky nenarazí před spuštěním ladicího proxy serveru. To zahrnuje zarážky v a zarážky v metodách životního cyklu komponent, které jsou načteny první stránkou Program.cs požadovanou OnInitialized{Async} z aplikace.

Pokud je aplikace hostovaná v jiné základní cestě aplikace než , aktualizujte následující vlastnosti v souboru tak, aby odrážely základní cestu / Properties/launchSettings.json aplikace:

  • applicationUrl:

    "iisSettings": {
  ...
  "iisExpress": {
    "applicationUrl": "http://localhost:{INSECURE PORT}/{APP BASE PATH}/",
    "sslPort": {SECURE PORT}
  }
},

  • inspectUri každého profilu:

    "profiles": {
  ...
  "{PROFILE 1, 2, ... N}": {
    ...
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/{APP BASE PATH}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    ...
  }
}

Zástupné symboly v předchozích nastaveních:

  • {INSECURE PORT}: Nezabezpečený port. Ve výchozím nastavení je k dispozici náhodná hodnota, ale je povolen vlastní port.
  • {APP BASE PATH}: Základní cesta aplikace.
  • {SECURE PORT}: Zabezpečený port. Ve výchozím nastavení je k dispozici náhodná hodnota, ale je povolen vlastní port.
  • {PROFILE 1, 2, ... N}: Profily nastavení spuštění. Aplikace obvykle ve výchozím nastavení určuje více než jeden profil (například profil pro IIS Express a profil projektu, který používá Kestrel server).

V následujících příkladech je aplikace hostovaná na adrese se základní cestou /OAT aplikace nakonfigurovanou jako wwwroot/index.html <base href="/OAT/"> :

"applicationUrl": "http://localhost:{INSECURE PORT}/OAT/",

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

Informace o použití vlastní základní cesty aplikace pro Blazor WebAssembly aplikace najdete v tématu Hostování a nasazení ASP.NET Core Blazor .

Ladění v prohlížeči

Pokyny v této části se vztahují na Google Chrome a Microsoft Edge běžící na Windows.

  1. Spusťte sestavení aplikace pro ladění ve vývojovém prostředí.

  2. Spusťte prohlížeč a přejděte na adresu URL aplikace (například https://localhost:7268 ).

  3. V prohlížeči se pokuste spustit vzdálené ladění stisknutím kláves Shift + Alt + d.

    Prohlížeč musí běžet s povoleným vzdáleným laděním, což není výchozí nastavení. Pokud je vzdálené ladění zakázané, zobrazí se chybová stránka na kartě prohlížeče, která se nepodařilo najít, a zobrazí se pokyny ke spuštění prohlížeče s otevřeným portem ladění. Postupujte podle pokynů pro váš prohlížeč. Otevře se nové okno prohlížeče. Zavřete předchozí okno prohlížeče.

  1. Po spuštění prohlížeče s povoleným vzdáleným laděním otevře klávesová zkratka ladění v předchozím kroku novou kartu ladicího programu.

  2. Po chvíli se na kartě Zdroje zobrazí seznam sestavení .NET aplikace v rámci file:// uzlu.

  3. V kódu komponenty ( souborech) a souborech kódu C# ( ) se při provádění kódu nastaví .razor .cs zarážky. Po zarážce můžete kódem v jednom kroku(F10)normálně pokračovat v provádění kódu nebo pokračovat(F8).

Blazor poskytuje ladicí proxy server, který implementuje protokol Chrome DevTools a o rozšíření protokolu o . Informace specifické pro NET. Při stisknutí klávesové zkratky pro ladění Blazor nasádá Nástroj DevTools pro Chrome na proxy server. Proxy server se připojí k oknu prohlížeče, které chcete ladit (proto je potřeba povolit vzdálené ladění).

Zdrojové mapy prohlížeče

Zdrojové mapy prohlížeče umožňují prohlížeči mapovat zkompilované soubory zpět na původní zdrojové soubory a běžně se používají pro ladění na straně klienta. V současné Blazor době se ale jazyk C# nemapuje přímo na JavaScript/WASM. Místo toho Blazor interpretuje IL v prohlížeči, takže zdrojové mapy nejsou relevantní.

Konfigurace brány firewall

Pokud brána firewall blokuje komunikaci s ladicím proxy serverem, vytvořte pravidlo výjimky brány firewall, které umožňuje komunikaci mezi prohlížečem a NodeJS procesem.

Upozornění

Úprava konfigurace brány firewall musí být provedena opatrně, aby se zabránilo vytváření ohrožení zabezpečení. Pečlivě použijte pokyny k zabezpečení, dodržujte osvědčené postupy zabezpečení a respektujte upozornění vydaná výrobcem brány firewall.

Povolení otevřené komunikace s NodeJS tímto procesem:

  • Otevře server Node pro jakékoli připojení v závislosti na možnostech a konfiguraci brány firewall.
  • V závislosti na vaší síti může být riziko.
  • Doporučuje se jenom na vývojářských počítačích.

Pokud je to možné, povolte pouze otevřenou komunikaci NodeJS s procesem v důvěryhodných nebo privátních sítích.

Pokyny Windows brány firewall najdete v tématu Vytvoření příchozího programu nebo pravidla služby. Další informace najdete v článcích Windows Defender firewall s pokročilým zabezpečením a v souvisejících článcích v sadě dokumentace Windows Firewall.

Řešení potíží

Pokud dochází k chybám, můžou vám pomoct následující tipy:

  • Na kartě Ladicí program otevřete v prohlížeči nástroje pro vývojáře. Spuštěním příkazu v konzole localStorage.clear() odeberte všechny zarážky.
  • Ověřte, že jste nainstalovali a důvěřoval certifikátu ASP.NET Core HTTPS. Další informace naleznete v tématu Vynutilit HTTPS v ASP.NET Core.
  • Visual Studio možnost Povolit ladění JavaScriptu pro ASP.NET (Chrome, Edge a IE) v části Nástroje > Možnosti > Ladění > Obecné. Toto je výchozí nastavení pro Visual Studio. Pokud ladění nefunguje, ověřte, že je vybraná možnost .
  • Pokud vaše prostředí používá proxy server HTTP, ujistěte se, že je localhost součástí nastavení obejití proxy serveru. To lze provést nastavením proměnné NO_PROXY prostředí v:
    • Soubor launchSettings.json pro projekt.
    • Na úrovni proměnných uživatelského nebo systémového prostředí, aby bylo možné je použít pro všechny aplikace. Při použití proměnné prostředí restartujte Visual Studio, aby se změna projeví.
  • Ujistěte se, že brány firewall nebo proxy servery neblokují komunikaci s ladicím proxy serverem ( NodeJS proces). Další informace najdete v části Konfigurace brány firewall .

Zarážky OnInitialized{Async} nejsou v neúspěšných.

BlazorSpuštění ladicího proxy serveru pro rozhraní trvá krátkou dobu, takže zarážky v OnInitialized{Async} metodách životního cyklu nemusí být k dispozice. Doporučujeme přidat zpoždění na začátek těla metody a umožnit tak spuštění ladicího proxy serveru nějakou dobu, než se zarážka zasáhne. Můžete zahrnout zpoždění na základě if direktivy kompilátoru , aby se zajistilo, že zpoždění není k dispozici pro sestavení pro vydání aplikace.

OnInitialized:

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

    ...
}

OnInitializedAsync:

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

    ...
}

časový limit Visual Studio (Windows)

pokud Visual Studio vyvolá výjimku, že se ladicímu adaptéru nepovedlo spustit zmínku o tom, že byl dosažen časový limit, můžete nastavit časový limit pomocí nastavení registru:

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

{TIMEOUT}Zástupný symbol v předchozím příkazu je v milisekundách. Například jedna minuta je přiřazena jako 60000 .

Blazor WebAssemblyaplikace se dají ladit pomocí nástrojů pro vývoj v prohlížeči v Chromiumch prohlížečích (Edge/Chrome). Aplikaci můžete také ladit pomocí následujících integrovaných vývojových prostředí (IDEs):

  • Visual Studio
  • Visual Studio pro Mac
  • Visual Studio Code

K dispozici jsou tyto scénáře:

  • Nastavení a odebrání zarážek.
  • Spusťte aplikaci s podporou ladění v prostředích IDEs.
  • Jednoduchý krok kódu.
  • Pokračuje v provádění kódu pomocí klávesové zkratky v prostředích IDEs.
  • V okně místní hodnoty Sledujte hodnoty místních proměnných.
  • Podívejte se do zásobníku volání, včetně řetězců volání mezi JavaScript a .NET.

Teď nemůžete:

  • Přerušit při neošetřených výjimkách.
  • Zarážky volání během spouštění aplikace před spuštěním ladicího proxy serveru. To zahrnuje zarážky v Program.cs a zarážky v OnInitialized{Async} metodách životního cyklu pro součásti, které jsou načteny první stránkou požadovanou z aplikace.
  • ladění v jiných než místních scénářích (například Subsystém Windows pro Linux (WSL) nebo Visual Studio Codespaces).
  • Automaticky znovu sestavit back-end *Server* aplikaci hostovaného Blazor WebAssembly řešení během ladění, například spuštěním aplikace pomocí dotnet watch run .

Požadavky

Ladění vyžaduje některý z následujících prohlížečů:

  • Google Chrome (verze 70 nebo novější) (výchozí)
  • Microsoft Edge (verze 80 nebo novější)

Zajistěte, aby brány firewall nebo proxy neblokovaly komunikaci s ladicím proxy serverem ( NodeJS proces). Další informace najdete v části Konfigurace brány firewall .

Visual Studio Code uživatelé vyžadují následující rozšíření:

po otevření projektu v VS Code se může zobrazit oznámení, že k povolení ladění je potřeba další nastavení. v případě vyžádání nainstalujte požadovaná rozšíření z webu Visual Studio Marketplace. Pokud chcete zkontrolovat nainstalovaná rozšíření, otevřete > rozšíření zobrazení z řádku nabídek nebo vyberte ikonu rozšíření na postranním panelu aktivita .

Visual Studio pro Mac vyžaduje verzi 8,8 (build 1532) nebo novější:

  1. nejnovější verzi Visual Studio pro Mac nainstalujete tak, že vyberete tlačítko stáhnout Visual Studio pro Mac v Microsoft: Visual Studio pro Mac.
  2. Vyberte kanál verze Preview v rámci Visual Studio. další informace najdete v tématu instalace verze preview Visual Studio pro Mac.

Poznámka

Apple Safari na macOS se v tuto chvíli nepodporuje.

Ladění samostatné Blazor WebAssembly aplikace

Chcete-li povolit ladění pro existující Blazor WebAssembly aplikaci, aktualizujte launchSettings.json soubor v spouštěném projektu tak, aby do inspectUri každého spouštěcího profilu zahrnoval následující vlastnost:

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

Po aktualizaci launchSettings.json by měl soubor vypadat podobně jako v následujícím příkladu:

{
    "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
        "applicationUrl": "http://localhost:50454",
        "sslPort": 44399
      }
    },
    "profiles": {
      "IIS Express": {
        "commandName": "IISExpress",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      },
      "BlazorApp1.Server": {
        "commandName": "Project",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "applicationUrl": "https://localhost:5001;http://localhost:5000",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      }
    }
  }

inspectUriVlastnost:

  • Umožňuje rozhraní IDE zjistit, že aplikace je Blazor WebAssembly aplikace.
  • Dá pokyn k tomu, aby se infrastruktura ladění skriptů připojovala k prohlížeči prostřednictvím Blazor ladicího proxy serveru.

V tomto rozhraní jsou k dispozici zástupné hodnoty pro identifikátor URI protokolu WebSocket ( wsProtocol ), hostitele ( url.hostname ), portu ( url.port ) a identifikátor URI pro inspektory v otevřeném prohlížeči ( browserInspectUri ).

Ladění Blazor WebAssembly aplikace v Visual Studio:

  1. Vytvořte nové hostované Blazor WebAssembly řešení.

  2. Po Server výběru projektu v Průzkumník řešení stiskněte klávesu F5 a spusťte aplikaci v ladicím programu.

    Poznámka

    při ladění pomocí Chromiumho prohlížeče, jako je Google Chrome nebo Microsoft Edge, se nové okno prohlížeče může otevřít s odděleným profilem pro relaci ladění namísto otevření karty v existujícím okně prohlížeče s profilem uživatele. Pokud je nutné ladit s profilem uživatele, proveďte jeden z následujících přístupů:

    Poznámka

    Spuštění bez ladění (CTRL + F5) není podporováno. Když je aplikace spuštěna v konfiguraci ladění, režie ladění vždy vede k omezení malého výkonu.

  3. V *Client* aplikaci nastavte zarážku na currentCount++; řádku v Pages/Counter.razor .

  4. V prohlížeči přejděte na Counter stránku a kliknutím na tlačítko klikněte na tlačítko Zobrazit zarážku.

  5. v Visual Studio zkontrolujte hodnotu currentCount pole v okně místní hodnoty.

  6. Pokračujte v provádění stisknutím klávesy F5 .

Při ladění Blazor WebAssembly aplikace můžete také ladit kód serveru:

  1. Nastavte zarážku na Pages/FetchData.razor stránce v OnInitializedAsync .
  2. Nastavte zarážku v WeatherForecastController Get metodě Action.
  3. Přejděte na Fetch Data stránku a vyberte první zarážku v FetchData součásti těsně předtím, než VYDÁ požadavek HTTP na server.
  4. Stisknutím klávesy F5 pokračujte v provádění a potom stiskněte zarážku na serveru v WeatherForecastController .
  5. Opakovaným stisknutím klávesy F5 můžete pokračovat v provádění a zobrazit tabulku předpovědi počasí vygenerovanou v prohlížeči.

Poznámka

Zarážky se během spouštění aplikace neprojeví před spuštěním ladicího proxy serveru. To zahrnuje zarážky v Program.cs a zarážky v OnInitialized{Async} metodách životního cyklu pro součásti, které jsou načteny první stránkou požadovanou z aplikace.

Pokud je aplikace hostovaná v jiné základní cestě aplikace než / , aktualizujte následující vlastnosti v nástroji Properties/launchSettings.json tak, aby odrážely základní cestu aplikace:

  • applicationUrl:

    "iisSettings": {
  ...
  "iisExpress": {
    "applicationUrl": "http://localhost:{INSECURE PORT}/{APP BASE PATH}/",
    "sslPort": {SECURE PORT}
  }
},

  • inspectUri každý profil:

    "profiles": {
  ...
  "{PROFILE 1, 2, ... N}": {
    ...
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/{APP BASE PATH}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    ...
  }
}

Zástupné symboly v předchozích nastaveních:

  • {INSECURE PORT}: Nezabezpečený port. Ve výchozím nastavení je k dispozici náhodná hodnota, ale je povolený vlastní port.
  • {APP BASE PATH}: Základní cesta aplikace.
  • {SECURE PORT}: Zabezpečený port. Ve výchozím nastavení je k dispozici náhodná hodnota, ale je povolený vlastní port.
  • {PROFILE 1, 2, ... N}: Profily nastavení spuštění. aplikace obvykle ve výchozím nastavení určuje více než jeden profil (například profil pro IIS Express a profil projektu, který je používán Kestrel serverem).

V následujících příkladech je aplikace hostovaná na základě /OAT základní cesty aplikace nakonfigurované v wwwroot/index.html podobě <base href="/OAT/"> :

"applicationUrl": "http://localhost:{INSECURE PORT}/OAT/",

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

Informace o tom, jak používat vlastní základní cestu aplikace pro Blazor WebAssembly aplikace, najdete v tématu Hostování a nasazení ASP.NET Core Blazor .

Ladění v prohlížeči

Pokyny v této části se vztahují na Google Chrome a Microsoft Edge běžící na Windows.

  1. Spusťte sestavení aplikace pro ladění ve vývojovém prostředí.

  2. Spusťte prohlížeč a přejděte na adresu URL aplikace (například https://localhost:5001 ).

  3. V prohlížeči se pokuste spustit vzdálené ladění stisknutím kláves Shift + Alt + d.

    Prohlížeč musí běžet s povoleným vzdáleným laděním, což není výchozí nastavení. Pokud je vzdálené ladění zakázané, zobrazí se chybová stránka na kartě prohlížeče, která se nepodařilo najít, a zobrazí se pokyny ke spuštění prohlížeče s otevřeným portem ladění. Postupujte podle pokynů pro váš prohlížeč. Otevře se nové okno prohlížeče. Zavřete předchozí okno prohlížeče.

  1. Po spuštění prohlížeče s povoleným vzdáleným laděním otevře klávesová zkratka ladění v předchozím kroku novou kartu ladicího programu.

  2. Po chvíli se na kartě Zdroje zobrazí seznam sestavení .NET aplikace v rámci file:// uzlu.

  3. V kódu komponenty ( souborech) a souborech kódu C# ( ) se při provádění kódu nastaví .razor .cs zarážky. Po zarážce můžete kódem v jednom kroku(F10)normálně pokračovat v provádění kódu nebo pokračovat(F8).

Blazor poskytuje ladicí proxy server, který implementuje protokol Chrome DevTools a o rozšíření protokolu o . Informace specifické pro NET. Při stisknutí klávesové zkratky pro ladění Blazor nasádá Nástroj DevTools pro Chrome na proxy server. Proxy server se připojí k oknu prohlížeče, které chcete ladit (proto je potřeba povolit vzdálené ladění).

Zdrojové mapy prohlížeče

Zdrojové mapy prohlížeče umožňují prohlížeči mapovat zkompilované soubory zpět na původní zdrojové soubory a běžně se používají pro ladění na straně klienta. V současné Blazor době se ale jazyk C# nemapuje přímo na JavaScript/WASM. Místo toho Blazor interpretuje IL v prohlížeči, takže zdrojové mapy nejsou relevantní.

Konfigurace brány firewall

Pokud brána firewall blokuje komunikaci s ladicím proxy serverem, vytvořte pravidlo výjimky brány firewall, které umožňuje komunikaci mezi prohlížečem a NodeJS procesem.

Upozornění

Úprava konfigurace brány firewall musí být provedena opatrně, aby se zabránilo vytváření ohrožení zabezpečení. Pečlivě použijte pokyny k zabezpečení, dodržujte osvědčené postupy zabezpečení a respektujte upozornění vydaná výrobcem brány firewall.

Povolení otevřené komunikace s NodeJS tímto procesem:

  • Otevře server Node pro jakékoli připojení v závislosti na možnostech a konfiguraci brány firewall.
  • V závislosti na vaší síti může být riziko.
  • Doporučuje se jenom na vývojářských počítačích.

Pokud je to možné, povolte pouze otevřenou komunikaci NodeJS s procesem v důvěryhodných nebo privátních sítích.

Pokyny Windows firewallu najdete v tématu Vytvoření příchozího programu nebo pravidla služby. Další informace najdete v článcích Windows Defender firewall s pokročilým zabezpečením a souvisejících článcích v sadě dokumentace Windows Firewall.

Řešení potíží

Pokud dochází k chybám, můžou vám pomoct následující tipy:

  • Na kartě Ladicí program otevřete v prohlížeči nástroje pro vývojáře. Spuštěním příkazu v konzole localStorage.clear() odeberte všechny zarážky.
  • Ověřte, že jste nainstalovali a důvěřoval certifikátu ASP.NET Core HTTPS. Další informace naleznete v tématu Vynutilit HTTPS v ASP.NET Core.
  • Visual Studio možnost Povolit ladění JavaScriptu pro ASP.NET (Chrome, Edge a IE) v části Nástroje > Možnosti > Ladění > Obecné. Toto je výchozí nastavení pro Visual Studio. Pokud ladění nefunguje, ověřte, že je vybraná možnost .
  • Pokud vaše prostředí používá proxy server HTTP, ujistěte se, že je localhost součástí nastavení obejití proxy serveru. Můžete to udělat tak, že nastavíte NO_PROXY proměnnou prostředí v těchto nastaveních:
    • Soubor launchSettings.json pro projekt.
    • Na úrovni proměnných uživatelského nebo systémového prostředí, aby bylo možné je použít pro všechny aplikace. Pokud používáte proměnnou prostředí, restartujte Visual Studio, aby se změna projeví.
  • Ujistěte se, že brány firewall nebo proxy servery neblokují komunikaci s ladicím proxy serverem ( NodeJS proces). Další informace najdete v části Konfigurace brány firewall.

Zarážky v OnInitialized{Async} nenarazení

Spuštění ladicího proxy serveru architektury trvá krátkou dobu, takže se nemusí dostat k zarážkám v metodách Blazor životního cyklu. OnInitialized{Async} Doporučujeme na začátek těla metody přidat prodlevu, která ladicímu proxy serveru poskytne čas na spuštění před zarážkou. Zpoždění můžete zahrnout na if základě direktivy kompilátoru, abyste zajistili, že se zpoždění pro sestavení verze aplikace nezdrží.

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)

Pokud Visual Studio výjimku, že se nepodařilo spustit adaptér ladění a uvádí, že došlo k dosažení časového limitu, můžete časový limit upravit pomocí nastavení registru:

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

Zástupný {TIMEOUT} symbol v předchozím příkazu je v milisekundách. Například jedna minuta se přiřadí jako 60000 .

Blazor WebAssemblyAplikace je možné ladit pomocí vývojářových nástrojů prohlížeče v Chromium prohlížečích (Edge/Chrome). Aplikaci můžete také ladit pomocí následujících integrovaných vývojových prostředí (ICE):

  • Visual Studio
  • Visual Studio pro Mac
  • Visual Studio Code

Mezi dostupné scénáře patří:

  • Nastavte a odeberte zarážky.
  • Spusťte aplikaci s podporou ladění v prostředích ID.
  • Kód si projdete jedním krokem.
  • Obnovte spouštění kódu pomocí klávesové zkratky v prostředích ID.
  • V okně Místní hodnoty sledujte hodnoty místních proměnných.
  • Podívejte se na zásobník volání, včetně řetězců volání mezi JavaScriptem a .NET.

Pro teď nemůžete:

  • Přerušení u neošetřených výjimek.
  • Než bude spuštěn ladicí proxy server, stiskněte během spouštění aplikace zarážky. To zahrnuje zarážky v a zarážky v metodách životního cyklu komponent, které jsou načteny první stránkou Program.cs požadovanou OnInitialized{Async} z aplikace.
  • Ladění v jiných než místních scénářích (například Subsystém Windows pro Linux (WSL) nebo Visual Studio Codespaces).
  • Automaticky znovu sestaví *Server* back-endové aplikace hostovaného řešení během ladění, například spuštěním Blazor WebAssembly aplikace pomocí dotnet watch run .

Požadavky

Ladění vyžaduje některý z následujících prohlížečů:

  • Google Chrome (verze 70 nebo novější) (výchozí)
  • Microsoft Edge (verze 80 nebo novější)

Ujistěte se, že brány firewall nebo proxy servery neblokují komunikaci s ladicím proxy serverem ( NodeJS proces). Další informace najdete v části Konfigurace brány firewall.

Visual Studio Code uživatelé vyžadují následující rozšíření:

Po otevření projektu v VS Code se může zobrazit oznámení, že k povolení ladění se vyžaduje další nastavení. V případě potřeby nainstalujte požadovaná rozšíření z Visual Studio Marketplace. Pokud chcete zkontrolovat nainstalovaná rozšíření, otevřete na řádku nabídek Zobrazit rozšíření nebo vyberte ikonu Rozšíření > na bočním panelu Aktivita.

Visual Studio pro Mac vyžaduje verzi 8.8 (build 1532) nebo novější:

  1. Nainstalujte nejnovější verzi služby Visual Studio pro Mac výběrem tlačítka Stáhnout Visual Studio pro Mac v Microsoftu: Visual Studio pro Mac.
  2. Vyberte kanál Preview v rámci Visual Studio. Další informace najdete v tématu Instalace verze Preview Visual Studio pro Mac.

Poznámka

Apple Safari v macOS se v současné době nepodporuje.

Ladění samostatné Blazor WebAssembly aplikace

Pokud chcete povolit ladění pro existující aplikaci, aktualizujte soubor v projektu po spuštění tak, aby v každém profilu spuštění zahrnoval Blazor WebAssembly launchSettings.json následující inspectUri vlastnost:

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

Po aktualizaci by launchSettings.json měl soubor vypadat podobně jako v následujícím příkladu:

{
    "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
        "applicationUrl": "http://localhost:50454",
        "sslPort": 44399
      }
    },
    "profiles": {
      "IIS Express": {
        "commandName": "IISExpress",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      },
      "BlazorApp1.Server": {
        "commandName": "Project",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "applicationUrl": "https://localhost:5001;http://localhost:5000",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      }
    }
  }

Vlastnost inspectUri :

  • Umožňuje integrovaného vývojového prostředí zjistit, že aplikace je Blazor WebAssembly aplikace.
  • Instruuje infrastrukturu ladění skriptů pro připojení k prohlížeči prostřednictvím Blazor ladicího proxy serveru.

Rozhraní poskytuje zástupné hodnoty pro protokol WebSocket ( ), hostitele ( ), port ( ) a identifikátor URI inspektoru ve wsProtocol url.hostname url.port browserInspectUri spuštěném prohlížeči ( ).

Ladění aplikace Blazor WebAssembly v Visual Studio:

  1. Vytvořte nové hostované Blazor WebAssembly řešení.

  2. Když je Server projekt vybraný v Průzkumník řešení, stisknutím klávesy F5 spusťte aplikaci v ladicím programu.

    Poznámka

    Při ladění pomocí prohlížeče založeného na Chromium, jako je Google Chrome nebo Microsoft Edge, se může otevřít nové okno prohlížeče s odděleným profilem pro relaci ladění místo otevření karty v existujícím okně prohlížeče s profilem uživatele. Pokud je ladění s profilem uživatele povinné, přistupte k jednomu z následujících přístupů:

    • Před stisknutím klávesy F5 zavřete všechny otevřené instance prohlížeče a spusťte ladění.
    • Nakonfigurujte Visual Studio, aby se prohlížeč spouštěl s profilem uživatele. Další informace o tomto přístupu najdete v tématu Ladění WASM ve VS spustí Edge s odděleným adresářem uživatelských dat Blazor (dotnet/aspnetcore #20915).

    Poznámka

    Spuštění bez ladění (Ctrl + F5) se nepodporuje. Když se aplikace spustí v konfiguraci ladění, režie ladění vždy vede k malému snížení výkonu.

  3. V aplikaci *Client* nastavte zarážku na řádku currentCount++; v Pages/Counter.razor .

  4. V prohlížeči přejděte na Counter stránku a výběrem tlačítka Click me (Klikněte na mě) přejděte na zarážku.

  5. V Visual Studio zkontrolujte hodnotu pole v currentCount okně Místní hodnoty.

  6. Pokračujte v provádění stisknutím klávesy F5.

Při ladění Blazor WebAssembly aplikace můžete také ladit kód serveru:

  1. Nastavte zarážku na Pages/FetchData.razor stránce v OnInitializedAsync .
  2. Nastavte zarážku v WeatherForecastController Get metodě v akci.
  3. Přejděte na stránku a těsně před tím, než vydá požadavek HTTP na server, přejděte k první Fetch Data FetchData zarážce v komponentě.
  4. Stisknutím klávesy F5 pokračujte v provádění a potom na serveru v nástroji stiskněte zarážku. WeatherForecastController
  5. Znovu stiskněte klávesu F5, abyste mohli pokračovat v provádění a podívat se na tabulku předpovědi počasí vykreslenou v prohlížeči.

Poznámka

Zarážky se při spuštění aplikace nenarazí před spuštěním ladicího proxy serveru. To zahrnuje zarážky v a zarážky v metodách životního cyklu komponent, které jsou načteny první stránkou Program.cs požadovanou OnInitialized{Async} z aplikace.

Pokud je aplikace hostovaná v jiné základní cestě aplikace než , aktualizujte následující vlastnosti v souboru tak, aby odrážely / základní cestu Properties/launchSettings.json aplikace:

  • applicationUrl:

    "iisSettings": {
  ...
  "iisExpress": {
    "applicationUrl": "http://localhost:{INSECURE PORT}/{APP BASE PATH}/",
    "sslPort": {SECURE PORT}
  }
},

  • inspectUri každého profilu:

    "profiles": {
  ...
  "{PROFILE 1, 2, ... N}": {
    ...
    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/{APP BASE PATH}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    ...
  }
}

Zástupné symboly v předchozích nastaveních:

  • {INSECURE PORT}: Nezabezpečený port. Ve výchozím nastavení je k dispozici náhodná hodnota, ale je povolen vlastní port.
  • {APP BASE PATH}: Základní cesta aplikace.
  • {SECURE PORT}: Zabezpečený port. Ve výchozím nastavení je k dispozici náhodná hodnota, ale je povolen vlastní port.
  • {PROFILE 1, 2, ... N}: Profily nastavení spuštění. Aplikace obvykle ve výchozím nastavení určuje více než jeden profil (například profil pro IIS Express a profil projektu, který používá Kestrel server).

V následujících příkladech je aplikace hostovaná na adrese se základní cestou /OAT aplikace nakonfigurovanou jako wwwroot/index.html <base href="/OAT/"> :

"applicationUrl": "http://localhost:{INSECURE PORT}/OAT/",

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

Informace o použití vlastní základní cesty aplikace pro Blazor WebAssembly aplikace najdete v tématu Hostování a nasazení ASP.NET Core Blazor .

Ladit v prohlížeči

pokyny v této části se vztahují na Google Chrome a Microsoft Edge spuštěné v Windows.

  1. Spusťte ladicí sestavení aplikace ve vývojovém prostředí.

  2. Spusťte prohlížeč a přejděte na adresu URL aplikace (například https://localhost:5001 ).

  3. V prohlížeči se pokuste zahájit vzdálené ladění stisknutím klávesy SHIFT + ALT + d.

    Prohlížeč musí běžet se zapnutým vzdáleným laděním, což není výchozí nastavení. Pokud je vzdálené ladění zakázané, zobrazí se stránka s informací o tom, že se pro spuštění prohlížeče s otevřeným portem ladění nedaří najít chybovou stránku karty prohlížeče. Postupujte podle pokynů pro prohlížeč a otevřete nové okno prohlížeče. Zavřete předchozí okno prohlížeče.

  1. Po spuštění prohlížeče se zapnutým vzdáleným laděním otevře klávesovou zkratku pro ladění v předchozím kroku novou kartu ladicího programu.

  2. Po chvíli se na kartě zdroje zobrazí seznam sestavení .NET aplikace v rámci file:// uzlu.

  3. V kódu komponenty ( .razor soubory) a souborech kódu jazyka C# ( .cs ) jsou zarážky, které jste nastavili, zasaženy při spuštění kódu. Po stisknutí zarážky se provede krok (F10) prostřednictvím kódu nebo obnovení kódu (F8) normálně.

Blazor poskytuje ladicí proxy, který implementuje protokol Chrome DevTools a rozšiřuje protokol pomocí. Informace specifické pro síť. Když se stiskne klávesová zkratka ladění, navede Blazor devtools Chrome na proxy serveru. Proxy server se připojí k oknu prohlížeče, které se pokoušíte ladit (takže je potřeba povolit vzdálené ladění).

Mapy zdroje prohlížeče

Mapování zdrojového kódu prohlížeče umožňují prohlížeči mapovat zkompilované soubory zpátky na původní zdrojové soubory a často se používají pro ladění na straně klienta. V Blazor současné době ale nemapuje C# přímo na JavaScript/WASM. Místo toho Blazor provede výklad il v prohlížeči, takže zdrojové mapy nejsou relevantní.

Konfigurace brány firewall

Pokud brána firewall blokuje komunikaci s ladicím proxy, vytvoří pravidlo výjimky brány firewall, které umožňuje komunikaci mezi prohlížečem a NodeJS procesem.

Upozornění

Úprava konfigurace brány firewall musí být provedena opatrně, aby se zabránilo vytváření ohrožení zabezpečení. Pečlivě použijte pokyny k zabezpečení, dodržujte osvědčené postupy zabezpečení a respektujte upozornění vydaná výrobcem brány firewall.

Povolení otevřené komunikace s NodeJS tímto procesem:

  • Otevře server Node pro jakékoli připojení v závislosti na možnostech a konfiguraci brány firewall.
  • V závislosti na vaší síti může být riziko.
  • Doporučuje se jenom na vývojářských počítačích.

Pokud je to možné, povolte pouze otevřenou komunikaci NodeJS s procesem v důvěryhodných nebo privátních sítích.

Pokyny Windows brány firewall najdete v tématu Vytvoření příchozího programu nebo pravidla služby. Další informace najdete v článcích Windows Defender firewall s pokročilým zabezpečením a souvisejících článcích v sadě dokumentace Windows Firewall.

Řešení potíží

Pokud dochází k chybám, můžou vám pomoct následující tipy:

  • Na kartě Ladicí program otevřete v prohlížeči nástroje pro vývojáře. Spuštěním příkazu v konzole localStorage.clear() odeberte všechny zarážky.
  • Ověřte, že jste nainstalovali a důvěřoval certifikátu ASP.NET Core HTTPS. Další informace naleznete v tématu Vynutilit HTTPS v ASP.NET Core.
  • Visual Studio možnost Povolit ladění JavaScriptu pro ASP.NET (Chrome, Edge a IE) v části Nástroje > Možnosti > Ladění > Obecné. Toto je výchozí nastavení pro Visual Studio. Pokud ladění nefunguje, ověřte, že je vybraná možnost .
  • Pokud vaše prostředí používá proxy server HTTP, ujistěte se, že je localhost součástí nastavení obejití proxy serveru. To lze provést nastavením proměnné NO_PROXY prostředí v:
    • Soubor launchSettings.json pro projekt.
    • Na úrovni proměnných uživatelského nebo systémového prostředí, aby bylo možné je použít pro všechny aplikace. Při použití proměnné prostředí restartujte Visual Studio, aby se změna projeví.
  • Ujistěte se, že brány firewall nebo proxy servery neblokují komunikaci s ladicím proxy serverem ( NodeJS proces). Další informace najdete v části Konfigurace brány firewall.

Zarážky v OnInitialized{Async} nenarazení

Spuštění ladicího proxy serveru architektury trvá krátkou dobu, takže se nemusí dostat k zarážkám v metodách Blazor životního cyklu. OnInitialized{Async} Doporučujeme na začátek těla metody přidat prodlevu, která ladicímu proxy serveru poskytne čas na spuštění před zarážkou. Zpoždění můžete zahrnout na if základě direktivy kompilátoru, abyste zajistili, že se zpoždění pro sestavení verze aplikace nezdrží.

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)

Pokud Visual Studio výjimku, že se nepodařilo spustit adaptér ladění a uvádí, že došlo k dosažení časového limitu, můžete časový limit upravit pomocí nastavení registru:

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

Zástupný {TIMEOUT} symbol v předchozím příkazu je v milisekundách. Například jedna minuta je přiřazená jako 60000 .