サンプル: カスタム DevTools ツール

サンプルの "Custom DevTools ツール" は、Microsoft Edge DevTools に カスタム ツールを追加する Microsoft Edge 拡張機能で、 アクティビティ バーに独自のタブがあります。

概要

カスタム DevTools ツールは、Microsoft Edge 内の DevTools に カスタム ツール タブとパネルを追加します。

カスタム ツール

カスタム ツールはメモリ情報を表示し、検査された Web ページと DevTools のパネルの間でメッセージを送信します。

カスタム DevTools ツールは、DevTools API を呼び出してメモリ情報を表示します。

検査中の Web ページと Custom DevTools ツールは、メッセージを相互に送信します。

この記事を使用して、サンプルをダウンロード、インストール、および実行します。 このサンプルのコードの詳細については、「 Microsoft Edge DevTools にカスタム ツールを追加する」を参照してください。

手順 1: サンプルをダウンロードする

まだ完了していない場合は、Demos リポジトリの "main" ブランチをダウンロードするか、リポジトリを複製 (またはフォークして複製) します。 リポジトリのダウンロードは最も簡単で、以下で説明します。

Demos リポジトリの "main" ブランチを次のようにダウンロードします。

  1. Microsoft Edge で、 MicrosoftEdge/Demos リポジトリに 移動します。

  2. [ コード ] ボタンの下矢印をクリックし、[ ZIP のダウンロード] を選択します。

  3. Microsoft Edge の [ ダウンロード ] ダイアログに Demos-main.zipが表示されます。 "-main" が追加されます。つまり、リポジトリの "main" ブランチの静的なスナップショットを意味します。

  4. Demos-main.zipの右側にマウス ポインターを合わせ、[フォルダーに表示] [フォルダーに表示] アイコン ボタンをクリックします。

    エクスプローラーが開き、[ダウンロード] フォルダーが表示されます。

  5. [ Demos-main.zip] を右クリックし、[ すべて抽出] を選択します。

    [ 圧縮 (Zip) フォルダーの抽出 ] ダイアログが開きます。

  6. [ 抽出 ] ボタンをクリックします。

    [ 完了率 ] ダイアログが開き、完了します。

  7. Demos-main フォルダーを GitHub リポジトリの場所 (C:\Users\localAccount\GitHub など) に移動します。

手順 2: 拡張機能をインストールして DevTools にツールを追加する

  1. Microsoft Edge で、新しいウィンドウまたはタブを開きます。

  2. [ 設定など] ([設定など] アイコン) を選択し、[ 拡張機能] にカーソルを合わせて、[ 拡張機能の管理] を選択します。

    [ 拡張機能 ] タブとページが開きます (edge://extensions)。

  3. [開発者モード] トグルをオンにします。

  4. [開梱された読み込み] アイコン [開梱を読み込む] を

    [ 拡張機能ディレクトリの選択 ] ダイアログが開きます。

  5. C:\Users\localAccount\GitHub\Demos-main\devtools-extension\など、/Demos-main/devtools-extension フォルダーに移動し、[フォルダーの選択] ボタンをクリックします。

    カスタム DevTools ツール カードが表示されます。

    [拡張機能] ページ

手順 3: DevTools でカスタム ツールを選択する

  1. Microsoft Edge で、To Do アプリなどの Web ページに新しいウィンドウまたはタブで移動します。

    カスタム DevTools ツールには、空のタブではなく Web ページが必要です。

  2. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. DevTools の アクティビティ バー で、[ カスタム ] (カスタム ツール アイコン) ツールのタブをクリックします。

    [ カスタム ツール] タブとパネルが表示されます。

    カスタム タブ

    カスタム (カスタム ツール アイコン) ツールのタブが表示されない場合は、次のいずれかの操作を行います。

    • [その他のツール ] ([その他のツール] アイコン) ボタンをクリックし、[カスタム] アイコン [カスタム] を選択します。

    • DevTools を広くし、 カスタム (カスタム アイコン) ツールのタブをクリックします。

    カスタム DevTools ページには、いくつかのセクションがあります。

    • メモリ表示情報。

    • DevTools から検査された Web ページにメッセージを送信し、ページに JavaScript alert ダイアログを表示するボタン。

    • 検査された Web ページから DevToolsコンソール と カスタム ツールにメッセージを送信する座標表示領域。

手順 4: 拡張 API 呼び出しを使用してメモリ情報を表示する

  • [カスタム] ツールの [使用可能なメモリ容量] の横で、値の 1 秒に 1 回の更新を確認します。

    使用可能なメモリ容量の更新

手順 5: DevTools から検査されたページにメッセージを送信する

  1. [カスタム] ツールで、[Say Hello] ボタンをクリックします。

    JavaScript alert ダイアログが開き、"DevTools 拡張機能から Hello!" というメッセージが表示されます。

    アラート

    DevTools は、検査された Web ページにメッセージを送信し、JavaScript にアラートを表示させます。

  2. [OK] ボタンをクリック します 。

    ダイアログが閉じます。

手順 6: 検査されたページから DevTools にメッセージを送信する

  1. 検査された Web ページで、さまざまなスポットをクリックします。

    [カスタム] ツールの [座標] の横にある座標は、クリックしながら表示および更新されます。

    カスタム ツールの座標

  2. DevTools のアクティビティ バーで、コンソール (コンソール アイコン) ツールを選択します。

  3. 検査された Web ページで、さまざまなスポットをクリックします。

    クリックした座標が コンソールに表示されます。

    コンソール ツールの座標

手順 7: カスタム ツールを変更する

  1. まだ完了していない場合は、 Visual Studio Code をインストールします。

  2. Visual Studio Code を開きます。

  3. [ ファイル ] メニューをクリックし、[ フォルダーを開く] をクリックします。

    [ フォルダーを開く] ダイアログが開きます。

  4. C:\Users\localAccount\GitHub\Demos-main\devtools-extension\など、/Demos-main/devtools-extension/ フォルダーに移動し、[フォルダーの選択] ボタンをクリックします。

    [エクスプローラー] ウィンドウに、/devtools-extension/ フォルダーが表示されます。

  5. panel.html をクリックします。

    panel.html は編集用に開かれます。

    Visual Studio Code の /devtools-extension/ フォルダー

  6. <h2>見出しに "My" を追加します。次から変更します。

    <h2>Custom DevTools Tool</h2>

    変更後:

    <h2>My Custom DevTools Tool</h2>

  7. panel.htmlを保存します。

  8. [エクスプローラー] ウィンドウで、[manifest.json] をクリックします。

    manifest.json は編集用に開かれます。

  9. nameに "My" を追加します。次から変更します。

    "name": "Custom DevTools Tool",

    変更後:

    "name": "My Custom DevTools Tool",

  10. manifest.jsonを保存します。

手順 8: 変更したカスタム ツールを再読み込みする

  1. Microsoft Edge で、[ 設定など] ([設定など] アイコン) を選択し、[ 拡張機能] にカーソルを合わせて、[ 拡張機能の管理] を選択します。

    [ 拡張機能 ] タブとページが開きます (edge://extensions)。

  2. [カスタム DevTools ツール] カードで、[再読み込み] リンクをクリックします。

    カードに、拡張機能の名前として My Custom DevTools Tool が表示されるようになりました。

    Reload

手順 9: 変更したカスタム ツールを使用する

  1. To Do アプリなどの Web ページに新しいウィンドウまたはタブで移動します。

    カスタム DevTools ツールには、空のタブではなく Web ページが必要です。

  2. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. DevTools の アクティビティ バー で、[ カスタム ] (カスタム ツール アイコン) ツールのタブをクリックします。

    [カスタム] ツールが表示され、パネルの見出しに [マイ] という単語が追加されます。

    変更されたカスタム ツール

    タイトルに [My Custom DevTools Tool] ではなく [Custom DevTools Tool ] と表示されている場合 は、DevTools を閉じてもう一度開きます。

    カスタム (カスタム ツール アイコン) ツールのタブが表示されない場合は、次のいずれかの操作を行います。

    • [その他のツール ] ([その他のツール] アイコン) ボタンをクリックし、[カスタム] アイコン [カスタム] を選択します。

    • DevTools を広くし、 カスタム (カスタム アイコン) ツールのタブをクリックします。

これは、DevTools 拡張機能サンプルを使用して変更する手順の最後です。

トラブルシューティング

[ カスタム ] タブが DevTools に表示されない場合、または古く、最新のコードの変更が表示されない場合:

  • DevTools を広くして、 アクティビティ バーに多数のツールを表示します。

  • DevTools を閉じてもう一度開きます。

  • 検査されたページを更新またはハード更新します。

  • Microsoft Edge の [拡張機能] ページで、 拡張機能 の [再読み込み ] をクリックします。

  • このような拡張機能にアイコンが指定されていない場合、選択されていない場合のタブは、 アクティビティ バーの右側にある狭くて灰色です。 狭い灰色のタブをクリックします。

  • 空のタブではなく、Web ページに移動します。サンプルの "Custom DevTools ツール" のコードには、Web ページが必要です。

アクティビティ バーが狭い場合、カスタム Devtools ツールがアクティビティ バーの [その他のツール] メニューに追加されます。

[ カスタム ] タブには、右クリック メニューの [アクティビティ バーから削除 ] コマンドがありません。

関連項目

  • Last updated on