daohualiuxiang
/
AspNetCore.Docs
mirror of https://github.com/dotnet/AspNetCore.Docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
AspNetCore.Docs/aspnetcore/blazor/hybrid/developer-tools.md

5.9 KiB
Raw Blame History

title author description monikerRange ms.author ms.custom ms.date uid zone_pivot_groups
Use browser developer tools with ASP.NET Core Blazor Hybrid guardrex Learn how to use browser developer tools with ASP.NET Core Blazor Hybrid apps. >= aspnetcore-6.0 riande mvc 11/08/2022 blazor/hybrid/developer-tools blazor-hybrid-operating-systems

Use browser developer tools with ASP.NET Core Blazor Hybrid

This article explains how to use browser developer tools with Blazor Hybrid apps.

Browser developer tools with .NET MAUI Blazor

Ensure the Blazor Hybrid project is configured to support browser developer tools. You can confirm developer tools support by searching the app for AddBlazorWebViewDeveloperTools.

If the project isn't already configured for browser developer tools, add support by:

  1. Locating where the call to AddMauiBlazorWebView is made, likely within the app's MauiProgram.cs file.

  2. After the call to AddMauiBlazorWebView, add the following code:

    #if DEBUG
    builder.Services.AddBlazorWebViewDeveloperTools();
#endif

[!NOTE] Guidance on popular browsers' developer tools can be found in the documentation of each browser maintainer:

:::zone pivot="windows"

To use browser developer tools with a Windows app:

  1. Run the .NET MAUI Blazor app for Windows and navigate to an app page that uses a BlazorWebView.

  2. Use the keyboard shortcut Ctrl+Shift+I to open browser developer tools.

  3. Developer tools provide a variety of features for working with apps, including which assets the page requested, how long assets took to load, and the content of loaded assets. The following example shows the Console tab to see the console messages, which includes any exception messages generated by the framework or developer code:

    Microsoft Edge DevTools window for a Blazor Hybrid app running on Windows

:::zone-end

:::zone pivot="android"

To use browser developer tools with an Android app:

  1. Start the Android emulator and navigate to an app page that uses a BlazorWebView.

  2. Open Google Chrome or Microsoft Edge.

  3. Navigate to chrome://inspect/#devices (Google Chrome) or edge://inspect/#devices (Microsoft Edge).

  4. Select the inspect link button to open developer tools. The following example shows the DevTools page in Microsoft Edge:

    Microsoft Edge Devices showing the BlazorWebView's "inspect" link button to open developer tools.

  5. Developer tools provide a variety of features for working with apps, including which assets the page requested, how long assets took to load, and the content of loaded assets. The following example shows the Console tab to see the console messages, which includes any exception messages generated by the framework or developer code:

    Microsoft Edge DevTools window for a Blazor Hybrid app running on an emulated Pixel 5

:::zone-end

:::zone pivot="ios"

To use Safari developer tools with an iOS app:

  1. Open desktop Safari.

  2. Select the Preferences > Advanced > Show Develop menu command.

  3. Run the .NET MAUI Blazor app in the iOS simulator and navigate to an app page that uses a BlazorWebView.

  4. Return to desktop Safari. Select Develop > Simulator > 0.0.0.0. If multiple entries for 0.0.0.0 are present, select the entry that highlights the BlazorWebView. The BlazorWebView is highlighted in blue in the iOS simulator when the correct 0.0.0.0 entry is selected.

    Safari Develop Simulator open showing two entries for "0.0.0.0" with the second entry selected because it highlights the BlazorWebView in the Visual Studio emulator UI.

  5. The Web Inspector window appears for the BlazorWebView.

  6. Developer tools provide a variety of features for working with apps, including which assets the page requested, how long assets took to load, and the content of loaded assets. The following example shows the Console tab, which includes any exception messages generated by the framework or developer code:

    Safari Web Inspector and Simulator windows for a Blazor Hybrid app running on an emulated iPad mini

:::zone-end

:::zone pivot="macos"

Using browser developer tools with :::no-loc text="Mac Catalyst"::: apps isn't currently supported. You may wish to run the iOS application instead, as the behavior is similar between iOS and :::no-loc text="Mac Catalyst":::.

:::zone-end