Edit

Use browser developer tools with ASP.NET Core Blazor Hybrid

  • Article

Note

This isn't the latest version of this article. For the current release, see the .NET 8 version of this article.

Important

This information relates to a pre-release product that may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.

For the current release, see the .NET 8 version of this article.

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. At the top of the MauiProgram.cs file, confirm the presence of a using statement for Microsoft.Extensions.Logging. If the using statement isn't present, add it to the top of the file:

    using Microsoft.Extensions.Logging;

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

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

To use browser developer tools with a Windows app:

  1. Run the .NET MAUI Blazor Hybrid app for Windows and navigate to an app page that uses a BlazorWebView. The developer tools console is unavailable from ContentPages without a Blazor Web View.

  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

To use browser developer tools with an Android app:

  1. Start the Android emulator and navigate to an app page that uses a BlazorWebView. The developer tools console is unavailable from ContentPages without a Blazor Web View.

  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

To use Safari developer tools with an iOS app:

  1. Open desktop Safari.

  2. Select the Safari > Preferences > Advanced > Show Develop menu in the menu bar checkbox.

  3. Run the .NET MAUI Blazor Hybrid app in the iOS simulator and navigate to an app page that uses a BlazorWebView. The developer tools console is unavailable from ContentPages without a Blazor Web View.

  4. Return to Safari. Select Develop > {REMOTE INSPECTION TARGET} > 0.0.0.0, where the {REMOTE INSPECTION TARGET} placeholder is either the devices's plain name (for example, MacBook Pro) or the device's serial number (for example XMVM7VFF10). 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

Add the com.apple.security.get-task-allow key, of type Boolean, to the entitlements file of the app for its debug build.

To add an entitlements file with the com.apple.security.get-task-allow key, add the following XML file named Entitlements.Debug.plist to the Platforms/MacCatalyst folder of the project.

Platforms/MacCatalyst/Entitlements.Debug.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.security.get-task-allow</key>
    <true/>
</dict>
</plist>

To consume the entitlements file for debug builds on Mac Catalyst, add the following <PropertyGroup> node to the app's project file as a child of the <Project> node:

<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' and '$(Configuration)' == 'Debug'">
    <CodeSignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodeSignEntitlements>
</PropertyGroup>

To use Safari developer tools with a macOS app:

  1. Open desktop Safari.

  2. Select the Safari > Preferences > Advanced > Show Develop menu in the menu bar checkbox.

  3. Run the .NET MAUI Blazor Hybrid app in macOS.

  4. Return to Safari. Select Develop > {REMOTE INSPECTION TARGET} > 0.0.0.0, where the {REMOTE INSPECTION TARGET} placeholder is either the devices's plain name (for example, MacBook Pro) or the device's serial number (for example XMVM7VFF10). If multiple entries for 0.0.0.0 are present, select the entry that highlights the BlazorWebView. The BlazorWebView is highlighted in blue in macOS when the correct 0.0.0.0 entry is selected.

  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 for a Blazor Hybrid app

Additional resources