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

注意

這不是這篇文章的最新版本。 關於目前版本，請參閱 本文的 .NET 10 版本。

警告

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

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

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

確保將 Blazor Hybrid 專案設定為支援瀏覽器開發人員工具。 您可以在應用程式中搜尋 AddBlazorWebViewDeveloperTools，以確認開發人員工具的支援情況。

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

  1. 尋找對 AddMauiBlazorWebView 進行呼叫的位置，可能位於應用程式的 MauiProgram.cs 檔案內。

  2. 在 MauiProgram.cs 檔案頂端，確認 using 的 Microsoft.Extensions.Logging 語句是否存在。 如果 using 語句不存在，請將其新增至檔案頂端：

    using Microsoft.Extensions.Logging;

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

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

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

  1. 執行適用於 Windows 的 .NET MAUIBlazor Hybrid 應用程式，並瀏覽至使用 BlazorWebView 的應用程式頁面。 若沒有 BlazorWeb View，則無法從 ContentPages 中使用開發人員工具主控台。

  2. 使用鍵盤快速鍵 Ctrl++，開啟瀏覽器開發人員工具。

  3. 開發人員工具提供各種不同的功能，可用來處理應用程式，包括頁面所要求的資產、資產載入所花費的時間長短，以及載入的資產內容。 下列範例顯示 [主控台] 索引標籤，可查看主控台訊息，其中包含架構或開發人員程式碼所產生的任何例外狀況訊息：

    專為在 Windows 上運行的 Blazor Hybrid 應用程式設計的 Microsoft Edge DevTools 視窗

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

  1. 啟動 Android 模擬器，並瀏覽至使用 BlazorWebView 的應用程式頁面。 無法從沒有 ContentPageBlazor 的 Web View 中使用開發人員工具主控台。

  2. 開啟 Google Chrome 或 Microsoft Edge。

  3. 瀏覽至 chrome://inspect/#devices (Google Chrome) 或 edge://inspect/#devices(Microsoft Edge)。

  4. 選取 inspect 連結按鈕以開啟開發人員工具。 下列範例顯示 Microsoft Edge 中的 DevTools 頁面：

    Microsoft Edge 裝置顯示 BlazorWebView 用來開啟開發人員工具的「檢查」連結按鈕。

  5. 開發人員工具提供各種不同的功能，可用來處理應用程式，包括頁面所要求的資產、資產載入所花費的時間長短，以及載入的資產內容。 下列範例顯示 [主控台] 索引標籤，可查看主控台訊息，其中包含架構或開發人員程式碼所產生的任何例外狀況訊息：

    在模擬的 Pixel 5 上執行的 Blazor Hybrid 應用程式適用的 Microsoft Edge DevTools 視窗

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

  1. 開啟桌面 Safari。

  2. 選取 [Safari]>中的 [偏好設定]>，然後在 [進階]>中勾選 [在功能表列中顯示開發功能表] 核取方塊。

  3. 在 iOS 模擬器中執行 .NET MAUIBlazor Hybrid 應用程式，並瀏覽至使用 BlazorWebView 的應用程式頁面。 當 Web View 沒有 ContentPageBlazor 時，無法使用開發人員工具主控台。

  4. 返回到 Safari。 選擇 開發>{REMOTE INSPECTION TARGET}>0.0.0.0，其中 {REMOTE INSPECTION TARGET} 預留位置是裝置的名稱 (例如 MacBook Pro) 或裝置的序列號 (例如 XMVM7VFF10)。 如果有多個 0.0.0.0 輸入存在，請選取醒目提示 BlazorWebView 的輸入。 選取正確的 0.0.0.0 項目時，BlazorWebView 會在 iOS 模擬器中顯示為藍色反白。

    Safari 開發模擬器的開啟狀態顯示兩個 '0.0.0.0' 項目，並選取了第二個項目，因為它在 Visual Studio 模擬器 UI 中將 BlazorWebView 高亮顯示。

  5. 的 [Web 偵測器]BlazorWebView 視窗隨即出現。

  6. 開發人員工具提供各種不同的功能，可用來處理應用程式，包括頁面所要求的資產、資產載入所花費的時間長短，以及載入的資產內容。 下列範例顯示 [主控台] 索引標籤，其中包含架構或開發人員程式碼所產生的任何例外狀況訊息：

    在模擬的 iPad mini 上執行的 Blazor Hybrid 應用程式適用的 Safari Web 偵測器和模擬器視窗

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

若要新增具有 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 開發人員工具：

  1. 開啟桌面 Safari。

  2. 選取 [Safari]> [偏好設定]> [進階]> [在功能表列中顯示開發功能表] 核取方塊。

  3. 在 macOS 中執行 .NET MAUIBlazor Hybrid 應用程式。

  4. 返回到 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。

  5. 隨即出現 Web 檢查器 視窗BlazorWebView。

  6. 開發人員工具提供各種不同的功能，可用來處理應用程式，包括頁面所要求的資產、資產載入所花費的時間長短，以及載入的資產內容。 下列範例顯示 [主控台] 索引標籤，其中包含架構或開發人員程式碼所產生的任何例外狀況訊息：

    適用於 Blazor Hybrid 應用程式的 Safari Web 偵測器

其他資源

  • Last updated on