Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rename Blazor Hybrid DevTools topic #25484

Merged
merged 3 commits into from
Mar 31, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
title: Handle errors in ASP.NET Core Blazor Hybrid
title: Use browser developer tools with ASP.NET Core Blazor Hybrid
author: guardrex
description: Learn how to develop ASP.NET Core Blazor Hybrid apps that detect and handle errors.
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: 03/24/2022
ms.date: 03/31/2022
no-loc: ["Blazor Hybrid", Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR]
uid: blazor/hybrid/handle-errors
uid: blazor/hybrid/developer-tools
zone_pivot_groups: blazor-hybrid-operating-systems
---
# Handle errors in ASP.NET Core Blazor Hybrid
# Use browser developer tools with ASP.NET Core Blazor Hybrid

This article explains how to use [browser developer tools](https://developer.mozilla.org/docs/Glossary/Developer_Tools) with Blazor Hybrid apps.

Expand Down Expand Up @@ -41,7 +41,7 @@ To use browser developer tools with a Windows app:
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/handle-errors/_static/edge2.png)
![Microsoft Edge DevTools window for a Blazor Hybrid app running on Windows](~/blazor/hybrid/developer-tools/_static/edge2.png)

:::zone-end

Expand All @@ -54,11 +54,11 @@ To use browser developer tools with an Android app:
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/handle-errors/_static/android.png)
![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/handle-errors/_static/edge1.png)
![Microsoft Edge DevTools window for a Blazor Hybrid app running on an emulated Pixel 5](~/blazor/hybrid/developer-tools/_static/edge1.png)

:::zone-end

Expand All @@ -71,12 +71,12 @@ To use Safari developer tools with an iOS app:
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/handle-errors/_static/ios.png)
![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/handle-errors/_static/safari1.png)
![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

Expand All @@ -94,7 +94,7 @@ To use Safari developer tools with a macOS app:
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/handle-errors/_static/safari2.png)
![Safari Web Inspector for a Blazor Hybrid app](~/blazor/hybrid/developer-tools/_static/safari2.png)

-->

Expand Down
4 changes: 2 additions & 2 deletions aspnetcore/toc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -351,8 +351,8 @@ items:
uid: blazor/hybrid/tutorials/wpf
- name: Routing and navigation
uid: blazor/hybrid/routing
- name: Handle errors
uid: blazor/hybrid/handle-errors
- name: Browser developer tools
uid: blazor/hybrid/developer-tools
- name: Project structure
uid: blazor/project-structure
- name: Fundamentals
Expand Down