ASP.NET Core Blazor Hybrid でブラウザー開発者ツールを使用する

Note

これは、この記事の最新バージョンではありません。 現在のリリースについては、 この記事の .NET 10 バージョンを参照してください。

警告

このバージョンの ASP.NET Core はサポート対象から除外されました。 詳細については、 .NET および .NET Core サポート ポリシーを参照してください。 現在のリリースについては、 この記事の .NET 10 バージョンを参照してください。

この記事では、ブラウザー開発ツールを Blazor Hybrid アプリで使用する方法について説明します。

.NET MAUI Blazor を使用したブラウザー開発者ツール

ブラウザー開発者ツールをサポートするように 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がないとContentPageから使用できません。

2. キーボード ショートカット Ctrl+Shift+I を使用して、ブラウザー開発者ツールを開きます。

3. 開発者ツールには、ページから要求されたアセット、アセットの読み込みにかかった時間、読み込まれたアセットのコンテンツなど、アプリを操作するためのさまざまな機能が用意されています。 次の例は、フレームワークまたは開発者コードによって生成された例外メッセージを含むコンソール メッセージを表示するための [コンソール] タブを示しています。

   

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 ページを示しています。

   

5. 開発者ツールには、ページから要求されたアセット、アセットの読み込みにかかった時間、読み込まれたアセットのコンテンツなど、アプリを操作するためのさまざまな機能が用意されています。 次の例は、フレームワークまたは開発者コードによって生成された例外メッセージを含むコンソール メッセージを表示するための [コンソール] タブを示しています。

   

iOS アプリで Safari 開発ツールを使用するには:

1. デスクトップ Safari を開きます。

2. [Safari]>[環境設定]>[詳細]>[メニュー バーに "開発" メニューを表示] チェックボックスをオンにします。

3. iOS シミュレーターで .NET MAUIBlazor Hybrid アプリを実行し、BlazorWebView を使用するアプリ ページに移動します。 開発者ツール コンソールは、BlazorWeb View がなくては ContentPage から使用できません。

4. Safari に戻ります。 [開発]>[{REMOTE INSPECTION TARGET}]>[0.0.0.0] を選択します。ここでの {REMOTE INSPECTION TARGET} プレースホルダーは、デバイスのプレーン名 (例: MacBook Pro) またはデバイスのシリアル番号 (例: XMVM7VFF10) のいずれかになります。 [0.0.0.0] のエントリが複数存在する場合は、BlazorWebView を強調表示するエントリを選択します。 正しい BlazorWebView エントリが選択されると、iOS シミュレーターで が青色で強調表示されます。

   

5. BlazorWebView の [Web Inspector] ウィンドウが表示されます。

6. 開発者ツールには、ページから要求されたアセット、アセットの読み込みにかかった時間、読み込まれたアセットのコンテンツなど、アプリを操作するためのさまざまな機能が用意されています。 次の例は、フレームワークまたは開発者コードによって生成された例外メッセージを含む [コンソール] タブを示しています。

   

com.apple.security.get-task-allow 型の Boolean キーを、デバッグ ビルド用にアプリのエンタイトルメント ファイルに追加します。

com.apple.security.get-task-allow キーを含むエンタイトルメント ファイルを追加するには、プロジェクトの Entitlements.Debug.plist フォルダーに次の Platforms/MacCatalyst という名前の XML ファイルを追加します。

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 を強調表示するエントリを選択します。 正しい BlazorWebView エントリが選択されると、macOS で が青色で強調表示されます。

5. ** Web Inspector ウィンドウが BlazorWebView に表示されます。

6. 開発者ツールには、ページから要求されたアセット、アセットの読み込みにかかった時間、読み込まれたアセットのコンテンツなど、アプリを操作するためのさまざまな機能が用意されています。 次の例は、フレームワークまたは開発者コードによって生成された例外メッセージを含む [コンソール] タブを示しています。

   

その他のリソース

• Chrome DevTools
• Microsoft Edge 開発者ツールの概要
• Safari 開発者向けヘルプ
• Mac Catalyst で BlazorWebView を検査する (13.1 より前の Mac Catalyst と 16.4 より前の iOS)