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

注意

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

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 8 バージョンを参照してください。

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

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

ブラウザー開発者ツールをサポートするように Blazor Hybrid プロジェクトを確実に構成します。 アプリで AddBlazorWebViewDeveloperTools が見つかれば、開発者ツールはサポートされています。

プロジェクトでブラウザー開発者ツールがまだ構成されていない場合、次を行い、サポートを追加します。

1. AddMauiBlazorWebView への呼び出しが行われる場所を見つける。おそらくはアプリの MauiProgram.cs ファイル内。

2. MauiProgram.cs ファイルの上部で、Microsoft.Extensions.Logging の using ステートメントが存在することを確認します。 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 を使用するアプリ ページに移動します。 開発者ツール コンソールは、BlazorWeb View がなくては ContentPage から使用できません。

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 を強調表示するエントリを選択します。 正しい [0.0.0.0] エントリが選択されると、iOS シミュレーターで BlazorWebView が青色で強調表示されます。

   

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

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

   

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

com.apple.security.get-task-allow キーを含むエンタイトルメント ファイルを追加するには、プロジェクトの Platforms/MacCatalyst フォルダーに次の Entitlements.Debug.plist という名前の 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 を強調表示するエントリを選択します。 正しい [0.0.0.0] エントリが選択されると、macOS で BlazorWebView が青色で強調表示されます。

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

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

   

その他のリソース

• Chrome DevTools
• Microsoft Edge 開発者ツールの概要
• Safari 開発者向けヘルプ