Events
Mar 31, 11 PM - Apr 2, 11 PM
The ultimate Microsoft Fabric, Power BI, SQL, and AI community-led event. March 31 to April 2, 2025.
Register todayThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Note
This isn't the latest version of this article. For the current release, see the .NET 9 version of this article.
Warning
This version of ASP.NET Core is no longer supported. For more information, see the .NET and .NET Core Support Policy. For the current release, see the .NET 9 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 9 version of this article.
This article explains how to use browser developer tools with Blazor Hybrid apps.
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:
Locating where the call to AddMauiBlazorWebView is made, likely within the app's MauiProgram.cs
file.
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;
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:
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.
Use the keyboard shortcut Ctrl+Shift+I to open browser developer tools.
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:
To use browser developer tools with an Android app:
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.
Open Google Chrome or Microsoft Edge.
Navigate to chrome://inspect/#devices
(Google Chrome) or edge://inspect/#devices
(Microsoft Edge).
Select the inspect
link button to open developer tools. The following example shows the DevTools page in Microsoft Edge:
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:
To use Safari developer tools with an iOS app:
Open desktop Safari.
Select the Safari > Preferences > Advanced > Show Develop menu in the menu bar checkbox.
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.
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.
The Web Inspector window appears for the BlazorWebView.
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:
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:
Open desktop Safari.
Select the Safari > Preferences > Advanced > Show Develop menu in the menu bar checkbox.
Run the .NET MAUI Blazor Hybrid app in macOS.
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.
The Web Inspector window appears for the BlazorWebView.
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:
ASP.NET Core feedback
ASP.NET Core is an open source project. Select a link to provide feedback:
Events
Mar 31, 11 PM - Apr 2, 11 PM
The ultimate Microsoft Fabric, Power BI, SQL, and AI community-led event. March 31 to April 2, 2025.
Register todayTraining
Module
Build a mobile and desktop app with Blazor Hybrid and .NET MAUI - Training
Learn how to set up your development environment and build your first cross-platform hybrid app with Blazor, .NET MAUI, and C#.
Certification
Microsoft Certified: Azure Developer Associate - Certifications
Build end-to-end solutions in Microsoft Azure to create Azure Functions, implement and manage web apps, develop solutions utilizing Azure storage, and more.