拡張機能を使用して DevTools にカスタム UI を追加する

Microsoft Edge DevTools で使用できるツールに加えて、Microsoft Edge 拡張機能をインストールして新しいツールを追加したり、特定のユース ケース用に独自の拡張機能を構築したりできます。 Microsoft Edge 拡張機能は、多くの場合、新しいボタンとパネルで Microsoft Edge ユーザー インターフェイスを拡張しますが、 アクティビティ バーに新しいツール タブを追加することで、Microsoft Edge 内で DevTools を拡張することもできます。

DevTools を拡張する拡張機能を見つける

Microsoft Edge アドオンの 開発者ツール カテゴリには、通常 DevTools を拡張する拡張機能が含まれています。

拡張機能が DevTools アクティビティ バーを拡張するかどうかは、実行したりソース コードを確認したりせずに知る方法はありませんが、Microsoft Edge アドオンの開発者ツール カテゴリは見てみるのに適しています。

DevTools に拡張機能をインストールする

DevTools を拡張する Microsoft Edge 拡張機能をインストールするには:

1. [開発者ツール] カテゴリなどの Microsoft Edge アドオンに移動し、インストールする拡張機能に移動します。

   たとえば、React Developer Tools 拡張機能に移動します。これは、次の手順で使用される例です。

   

2. [ 取得 ] ボタンをクリックします。 [インストール] ダイアログが開き、[<extension name> Microsoft Edge に追加しますか?

3. [ 拡張機能の追加] ボタンをクリックします。 ダイアログは、拡張機能がインストールされていることを示し、[拡張機能 ] () ボタンに拡張機能が一覧表示されます。

4. 新しいタブまたはウィンドウを開き、DevTools 拡張機能に関連するコンテンツを含むページに移動します。 たとえば、TodoMVC Reactサンプル ページを使用するか、デモ to do などのライブ Microsoft Edge Demos リポジトリ ページに移動します。

5. F12 キーを押すなどして DevTools を開きます。 このReact拡張機能の場合、アクティビティ バーに 2 つの新しいタブが開きます:コンポーネントとプロファイラー:

   

6. アクティビティ バーに新しいタブが表示されない場合は、DevTools の幅を広げるか、[その他のツール] () ボタンをクリックして、ツールを選択します。

   

DevTools 拡張機能を作成する

独自の DevTools 拡張機能を作成して、DevTools アクティビティ バーに新しいタブを追加したり、検査されたページと対話したりできます。

DevTools 拡張機能の作成に関するページを参照してください。