AspNetCore.Docs/aspnetcore/blazor/hybrid/developer-tools.md

136 lines
8.6 KiB
Markdown
Raw Normal View History

2022-03-30 08:37:45 +08:00
---
title: Use browser developer tools with ASP.NET Core Blazor Hybrid
2022-03-30 08:37:45 +08:00
author: guardrex
description: Learn how to use browser developer tools with ASP.NET Core Blazor Hybrid apps.
2022-03-30 08:37:45 +08:00
monikerRange: '>= aspnetcore-6.0'
ms.author: riande
ms.custom: "mvc"
ms.date: 01/14/2022
uid: blazor/hybrid/developer-tools
2022-03-30 08:37:45 +08:00
zone_pivot_groups: blazor-hybrid-operating-systems
---
# Use browser developer tools with ASP.NET Core Blazor Hybrid
2022-03-30 08:37:45 +08:00
[!INCLUDE[](~/includes/not-latest-version.md)]
2023-04-04 23:06:06 +08:00
<!-- This topic drops loc for "Mac Catalyst" -->
2022-03-30 08:37:45 +08:00
This article explains how to use [browser developer tools](https://developer.mozilla.org/docs/Glossary/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`.
2022-03-30 08:37:45 +08:00
If the project isn't already configured for browser developer tools, add support by:
1. Locating where the call to <xref:Microsoft.Extensions.DependencyInjection.BlazorWebViewServiceCollectionExtensions.AddMauiBlazorWebView%2A> is made, likely within the app's `MauiProgram.cs` file.
1. At the top of the `MauiProgram.cs` file, confirm the presence of a `using` statement for <xref:Microsoft.Extensions.Logging?displayProperty=fullName>. If the `using` statement isn't present, add it to the top of the file:
```csharp
using Microsoft.Extensions.Logging;
```
1. After the call to <xref:Microsoft.Extensions.DependencyInjection.BlazorWebViewServiceCollectionExtensions.AddMauiBlazorWebView%2A>, add the following code:
```csharp
#if DEBUG
builder.Services.AddBlazorWebViewDeveloperTools();
builder.Logging.AddDebug();
#endif
```
2022-03-30 08:37:45 +08:00
:::zone pivot="windows"
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 <xref:Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebView>. The developer tools console is unavailable from <xref:Microsoft.Maui.Controls.ContentPage>s without a Blazor :::no-loc text="Web View":::.
2022-03-30 08:37:45 +08:00
1. Use the keyboard shortcut <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd> to open browser developer tools.
1. 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](~/blazor/hybrid/developer-tools/_static/edge2.png)
2022-03-30 08:37:45 +08:00
:::zone-end
:::zone pivot="android"
To use browser developer tools with an Android app:
2023-01-31 02:24:22 +08:00
1. Start the Android emulator and navigate to an app page that uses a <xref:Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebView>. The developer tools console is unavailable from <xref:Microsoft.Maui.Controls.ContentPage>s without a Blazor :::no-loc text="Web View":::.
2022-03-30 08:37:45 +08:00
1. Open Google Chrome or Microsoft Edge.
1. Navigate to `chrome://inspect/#devices` (Google Chrome) or `edge://inspect/#devices` (Microsoft Edge).
1. 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.](~/blazor/hybrid/developer-tools/_static/android.png)
2022-03-30 08:37:45 +08:00
1. 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](~/blazor/hybrid/developer-tools/_static/edge1.png)
2022-03-30 08:37:45 +08:00
:::zone-end
:::zone pivot="ios"
To use Safari developer tools with an iOS app:
1. Open desktop Safari.
1. Select the **Safari** > **Preferences** > **Advanced** > **Show Develop menu in the menu bar** checkbox.
1. Run the .NET MAUI Blazor Hybrid app in the iOS simulator and navigate to an app page that uses a <xref:Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebView>. The developer tools console is unavailable from <xref:Microsoft.Maui.Controls.ContentPage>s without a Blazor :::no-loc text="Web View":::.
1. 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 <xref:Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebView>. The <xref:Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebView> is highlighted in blue in the iOS simulator when the correct **0.0.0.0** entry is selected.
2022-03-30 08:37:45 +08:00
![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.](~/blazor/hybrid/developer-tools/_static/ios.png)
2022-03-30 08:37:45 +08:00
1. The **Web Inspector** window appears for the <xref:Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebView>.
2022-03-30 08:37:45 +08:00
1. 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](~/blazor/hybrid/developer-tools/_static/safari1.png)
2022-03-30 08:37:45 +08:00
:::zone-end
:::zone pivot="macos"
<!-- On macOS, XML files use 4-space indents. Also, the PU uses 4-space indents in the .NET MAUI template file. -->
Add the `com.apple.security.get-task-allow` key, of type `Boolean`, to the [entitlements file](/dotnet/maui/ios/entitlements) 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
<?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 :::no-loc text="Mac Catalyst":::, add the following `<PropertyGroup>` node to the app's project file as a child of the `<Project>` node:
```xml
<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' and '$(Configuration)' == 'Debug'">
<CodeSignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodeSignEntitlements>
</PropertyGroup>
```
2022-03-30 08:37:45 +08:00
To use Safari developer tools with a macOS app:
1. Open desktop Safari.
1. Select the **Safari** > **Preferences** > **Advanced** > **Show Develop menu in the menu bar** checkbox.
1. Run the .NET MAUI Blazor Hybrid app in macOS.
1. 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 <xref:Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebView>. The <xref:Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebView> is highlighted in blue in macOS when the correct **0.0.0.0** entry is selected.
1. The **Web Inspector** window appears for the <xref:Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebView>.
2022-03-30 08:37:45 +08:00
1. 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](~/blazor/hybrid/developer-tools/_static/safari2.png)
2022-03-30 08:37:45 +08:00
:::zone-end
## Additional resources
* [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
* [Microsoft Edge Developer Tools overview](/microsoft-edge/devtools-guide-chromium/)
* [Safari Developer Help](https://support.apple.com/guide/safari-developer/welcome/mac)