新版Microsoft Edge（Chromium）のDevTools一覧 – 開発者向け完全ガイド

新しいMicrosoft Edgeは、Chromiumオープンソースプロジェクトをベースに構築されています。Web開発者の皆さんのために、Microsoft Edge（Chromium版）で利用できるDevToolsの一覧をまとめました。従来のEdgeにはなかった新しいツールもいくつか追加されており、Webサイトの構築やテストがより簡単かつスピーディーに行えるようになっています。

新しいEdge（Chromium）のDevTools一覧

Microsoft Edge（Chromium版）のDevToolsは、大きく以下の2つのカテゴリに分けられます。

1. コアツール（Core Tools）
2. 拡張機能（Extensions）

1. コアツール（Core Tools）

Elementsパネル： Web開発者にとって最も便利な機能のひとつが、ページ上のHTMLとCSSを「ライブ編集」できることです。Elementsパネルを使えば、HTMLやCSSの編集、アクセシビリティプロパティの確認、イベントリスナーの表示、DOM変更ブレークポイントの設定などが行えます。

Console（コンソール）： Consoleツールは、JavaScriptのエラー、ネットワークリクエスト、セキュリティ関連の警告など、Webページに関する情報を記録します。トラブルシューティングの第一歩として、まずブラウザのコンソールを確認するのが定番です。

そのため、Edgeブラウザには専用のコンソールパネルが用意されています。開発者はこのパネルを使って、対話形式のデバッグ、アドホックなテスト、実行中のWebページとのデータのやり取りを行うことができます。

Sourcesパネル： JavaScriptデバッガーとも呼ばれる、JavaScript開発者にとって最も有用なツールです。これを使えば、実行時にコードを開いて編集したり、ブレークポイントを設定してコードを1行ずつステップ実行しながら、Webサイトの状態を詳細に確認できます。

Networkパネル： ネットワークおよびブラウザキャッシュとの間で行われるリクエストとレスポンスを監視・検査できます。

Performanceパネル： ランタイムパフォーマンスのデータを記録します。ランタイムパフォーマンスとは、ページの読み込み時ではなく、実行中のページがどのように動作しているかを指します。

Memoryパネル： メモリの問題は、パフォーマンス低下の主な原因となることがあります。メモリリークなどが発生すると、時間の経過とともにページの応答が遅くなり、動作が重くなります。Memoryパネルでは、システムリソースの使用状況を測定し、コード実行のさまざまな段階におけるヒープスナップショットを比較できます。

Applicationパネル： Webページのさまざまなプロパティを表示します。ストレージ、データベース、キャッシュの検査や管理も、このパネルから行えます。

Securityパネル： 現在表示しているページが安全かどうかをチェックできます。オリジンの検査も可能で、開発者はセキュリティ問題のデバッグや、HTTPSが適切に実装されているかの確認に利用できます。

Auditsパネル： 名前の通り、Webサイトを監査（オーディット）するための機能です。取得した結果をもとに、サイトの品質向上につなげることができます。

2. 拡張機能（Extensions）

Edge自体は拡張機能に対応していますが、現時点ではDevTools専用の拡張機能は提供されていません。代わりに、Chromeウェブストアなどのサードパーティのストアから拡張機能をインストールする必要があります。

• Edge左上の三点リーダー（メニューアイコン）をクリックし、「拡張機能」を選択します。
• 拡張機能ページの左下にある「他のストアからの拡張機能を許可する」トグルをオンにします。
• 次にChromeウェブストアにアクセスし、DevToolsで使える拡張機能（例：Facebook製のReact Developer Tools）を開きます。
• 「Chromeに追加」をクリックすれば、DevTools拡張機能がMicrosoft Edgeに追加されます。

要するに、これはEdgeにChrome拡張機能をインストールする手順です。ただし注意点として、純粋なChrome拡張機能の場合、Microsoftが一部のChromiumサービスや機能を削除しているため、正常に動作しない可能性があります。

新しいEdgeブラウザは、Windows 10の次の機能更新プログラムとともに提供される予定です。Edgeに依存したWebサイトやビジネスをお持ちの方は、事前に準備を進めておくことをおすすめします。

より詳しい情報については、Microsoft公式サイトをご覧ください。