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

<!-- This topic drops loc for "Mac Catalyst" -->

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`.

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.
1. After the call to `AddMauiBlazorWebView`, add the following code:

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

> [!NOTE]
> Guidance on popular browsers' developer tools can be found in the documentation of each browser maintainer:
>
> * [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
> * [Microsoft Edge Developer Tools overview](/microsoft-edge/devtools-guide-chromium/)
> * [Safari Web Inspector](https://support.apple.com/guide/safari-developer/welcome/mac)

:::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`.
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)

:::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`.
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)

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)

:::zone-end

:::zone pivot="ios"

To use Safari developer tools with an iOS app:

1. Open desktop Safari.
1. Select the **Preferences** > **Advanced** > **Show Develop** menu command.
1. Run the .NET MAUI Blazor app in the iOS simulator and navigate to an app page that uses a `BlazorWebView`.
1. 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.](~/blazor/hybrid/developer-tools/_static/ios.png)

1. The **Web Inspector** window appears for the `BlazorWebView`.
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)

:::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](?pivots=ios) application instead, as the behavior is similar between iOS and :::no-loc text="Mac Catalyst":::.

<!--
To use Safari developer tools with a macOS app:

1. Open desktop Safari.
1. Select the **Preferences** > **Advanced** > **Show Develop** menu command.
1. Run the .NET MAUI Blazor app in the macOS simulator.
1. 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 macOS simulator when the correct **0.0.0.0** entry is selected.
1. The **Web Inspector** window appears for the `BlazorWebView`.
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)

-->

:::zone-end