將 ASP.NET Core Blazor Hybrid 與瀏覽器開發人員工具搭配使用

發行項
11/06/2024

注意

這不是這篇文章的最新版本。如需目前的版本，請參閱本文的 .NET 9 版本。

警告

不再支援此版本的 ASP.NET Core。如需詳細資訊，請參閱 .NET 和 .NET Core 支援原則。如需目前版本，請參閱本文的 .NET 8 版本。

重要

這些發行前產品的相關資訊在產品正式發行前可能會有大幅修改。 Microsoft 對此處提供的資訊，不做任何明確或隱含的瑕疵擔保。

如需目前的版本，請參閱本文的 .NET 9 版本。

本文說明如何將瀏覽器開發人員工具與 Blazor Hybrid 應用程式搭配使用。

包含 .NET MAUIBlazor 的瀏覽器開發人員工具

確保將 Blazor Hybrid 專案設定為支援瀏覽器開發人員工具。您可以搜尋應用程式是否有 AddBlazorWebViewDeveloperTools，來確認開發人員工具支援。

如果尚未針對瀏覽器開發人員工具設定專案，請透過下列方式新增支援：

尋找對 AddMauiBlazorWebView 進行呼叫的位置，可能位於應用程式的 MauiProgram.cs 檔案內。
在 MauiProgram.cs 檔案頂端，確認 Microsoft.Extensions.Logging 的 using 語句是否存在。如果 using 語句不存在，請將其新增至檔案頂端：
```
using Microsoft.Extensions.Logging;
```

呼叫 AddMauiBlazorWebView 之後，請新增下列程式碼：

#if DEBUG
    builder.Services.AddBlazorWebViewDeveloperTools();
    builder.Logging.AddDebug();
#endif

若要將瀏覽器開發人員工具與 Windows 應用程式搭配使用：

執行適用於 Windows 的 .NET MAUIBlazor Hybrid 應用程式，並瀏覽至使用 BlazorWebView 的應用程式頁面。無法從沒有 BlazorWeb View 的 ContentPage 中使用開發人員工具主控台。
使用鍵盤快速鍵 Ctrl+Shift+I，開啟瀏覽器開發人員工具。
開發人員工具提供各種不同的功能，可用來處理應用程式，包括頁面所要求的資產、資產載入所花費的時間長短，以及載入的資產內容。下列範例顯示 [主控台] 索引標籤，可查看主控台訊息，其中包含架構或開發人員程式碼所產生的任何例外狀況訊息：

若要將瀏覽器開發人員工具與 Android 應用程式搭配使用：

啟動 Android 模擬器，並瀏覽至使用 BlazorWebView 的應用程式頁面。無法從沒有 BlazorWeb View 的 ContentPage 中使用開發人員工具主控台。
開啟 Google Chrome 或 Microsoft Edge。
瀏覽至 chrome://inspect/#devices (Google Chrome) 或 edge://inspect/#devices(Microsoft Edge)。
選取 inspect 連結按鈕以開啟開發人員工具。下列範例顯示 Microsoft Edge 中的 DevTools 頁面：
開發人員工具提供各種不同的功能，可用來處理應用程式，包括頁面所要求的資產、資產載入所花費的時間長短，以及載入的資產內容。下列範例顯示 [主控台] 索引標籤，可查看主控台訊息，其中包含架構或開發人員程式碼所產生的任何例外狀況訊息：

若要搭配 iOS 應用程式使用 Safari 開發人員工具：

開啟桌面 Safari。
選取 [Safari] > [偏好設定] > [進階] > [在功能表列中顯示開發功能表] 核取方塊。
在 iOS 模擬器中執行 .NET MAUIBlazor Hybrid 應用程式，並瀏覽至使用 BlazorWebView 的應用程式頁面。無法從沒有 BlazorWeb View 的 ContentPage 中使用開發人員工具主控台。
返回到 Safari。選取 [開發] >[{REMOTE INSPECTION TARGET}] > [0.0.0.0]，其中 {REMOTE INSPECTION TARGET} 預留位置是裝置的一般名稱 (例如 MacBook Pro) 或裝置的序號 (例如 XMVM7VFF10)。如果有多個 0.0.0.0 輸入存在，請選取醒目提示 BlazorWebView 的輸入。選取正確的 [0.0.0.0.0] 輸入時，會在 iOS 模擬器中以藍色反白顯示 BlazorWebView。
BlazorWebView 的 [Web 偵測器] 視窗隨即出現。
開發人員工具提供各種不同的功能，可用來處理應用程式，包括頁面所要求的資產、資產載入所花費的時間長短，以及載入的資產內容。下列範例顯示 [主控台] 索引標籤，其中包含架構或開發人員程式碼所產生的任何例外狀況訊息：

將 Boolean 類型的 com.apple.security.get-task-allow 金鑰新增至偵錯組建的應用程式權利檔案。

若要新增具有 com.apple.security.get-task-allow 金鑰的權利檔案，請將名為 Entitlements.Debug.plist 的下列 XML 檔案新增至專案的 Platforms/MacCatalyst 資料夾。

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>

若要在 Mac Catalyst 上取用偵錯組建的權利檔案，請將下列 <PropertyGroup> 節點新增至應用程式的專案檔作為 <Project> 節點的子系：

<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' and '$(Configuration)' == 'Debug'">
    <CodeSignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodeSignEntitlements>
</PropertyGroup>

若要搭配 macOS 應用程式使用 Safari 開發人員工具：

開啟桌面 Safari。
選取 [Safari] > [偏好設定] > [進階] > [在功能表列中顯示開發功能表] 核取方塊。
在 macOS 中執行 .NET MAUIBlazor Hybrid 應用程式。
返回到 Safari。選取 [開發] >[{REMOTE INSPECTION TARGET}] > [0.0.0.0]，其中 {REMOTE INSPECTION TARGET} 預留位置是裝置的一般名稱 (例如 MacBook Pro) 或裝置的序號 (例如 XMVM7VFF10)。如果有多個 0.0.0.0 輸入存在，請選取醒目提示 BlazorWebView 的輸入。選取正確的 [0.0.0.0] 輸入時，會在 macOS 中以藍色反白顯示 BlazorWebView。
BlazorWebView 的 [Web 偵測器] 視窗隨即出現。
開發人員工具提供各種不同的功能，可用來處理應用程式，包括頁面所要求的資產、資產載入所花費的時間長短，以及載入的資產內容。下列範例顯示 [主控台] 索引標籤，其中包含架構或開發人員程式碼所產生的任何例外狀況訊息：

共用方式為

將 ASP.NET Core Blazor Hybrid 與瀏覽器開發人員工具搭配使用

包含 .NET MAUIBlazor 的瀏覽器開發人員工具

其他資源

其他資源