Blazor Hybrid dev tools topic (#25384)

aspnetcore/blazor/hybrid/handle-errors.md

@@ -0,0 +1,101 @@
+---
+title: Handle errors in ASP.NET Core Blazor Hybrid
+author: guardrex
+description: Learn how to develop ASP.NET Core Blazor Hybrid apps that detect and handle errors.
+monikerRange: '>= aspnetcore-6.0'
+ms.author: riande
+ms.custom: "mvc"
+ms.date: 03/24/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
+zone_pivot_groups: blazor-hybrid-operating-systems
+---
+# Handle errors in 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.
+
+[!INCLUDE[](~/blazor/includes/blazor-hybrid-preview-notice.md)]
+
+## Browser developer tools with .NET MAUI Blazor
+
+Ensure the Blazor Hybrid project is configured to support browser developer tools. Locate the `CreateMauiApp` method in the app, which is likely within the app's `Program.cs` or `Startup.cs` file and contains `services.AddMauiBlazorWebView()`. If the services extension method to add services for `BlazorWebView` developer tools (`AddBlazorWebViewDeveloperTools`) isn't present in the app's `CreateMauiApp` method for debug app execution (compiler directive: `DEBUG`), add it to the `CreateMauiApp` method:
+
+```csharp
+#if DEBUG
+    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/handle-errors/_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/handle-errors/_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)
+
+:::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 item.
+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)
+
+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)
+
+:::zone-end
+
+:::zone pivot="macos"
+
+Using browser developer tools with Mac Catalyst apps isn't currently supported. Please use the guidance for [iOS](?pivots=ios) apps, as the behavior is similar between the two platforms.
+
+<!--
+To use Safari developer tools with a macOS app:
+
+1. Open desktop Safari.
+1. Select the **Preferences** > **Advanced** > **Show Develop** menu item.
+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/handle-errors/_static/safari2.png)
+
+-->
+
+:::zone-end

aspnetcore/toc.yml

@@ -351,6 +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: Project structure
             uid: blazor/project-structure
           - name: Fundamentals

aspnetcore/zone-pivot-groups.yml

@@ -18,3 +18,15 @@ groups:
       title: Blazor Server
     - id: webassembly
       title: Blazor WebAssembly
+- id: blazor-hybrid-operating-systems
+  title: Operating System
+  prompt: Target operating system
+  pivots:
+    - id: android
+      title: Android
+    - id: ios
+      title: iOS
+    - id: macos
+      title: macOS
+    - id: windows
+      title: Windows