新しい Microsoft Edge は、Chromium オープン ソース プロジェクトを使用して構築されています。開発者の方は、次のリストを参照してください。Microsoft Edge の開発ツール (Chromium)。いくつかの新しいツールが DevTools リストに加わりました。これにより、開発者は Microsoft Edge で Web サイトを簡単かつ迅速に構築し、テストできるようになります。
Microsoft Edgeブラウザの開発ツールのリスト
Microsoft Edge (Chromium) DevTools は、次の 2 つの異なるカテゴリに大まかに分類できます。
- コアツール
- 拡張機能。
1] コアツール
要素パネル –Web 開発者にとって DevTools の最も便利な機能の 1 つは、ページ上の HTML と CSS を「ライブ編集」できる機能です。 [要素] パネルを使用して、HTML と CSS の編集、アクセシビリティ プロパティの検査、イベント リスナーの表示、DOM ミューテーション ブレークポイントの設定を行うことができます。
コンソール –コンソール ツールは通常、JavaScript、ネットワーク リクエスト、セキュリティ エラーなど、Web ページに関連する情報をログに記録します。したがって、問題のトラブルシューティングの最初のステップは、ブラウザ コンソールを確認することです。
それはこのためです。 Edge ブラウザには専用のコンソール パネルが表示されます。開発者は、同じパネルを対話型デバッグ、アドホック テストに使用し、実行中の Web ページとの間で通信を行うことができます。
ソースパネル –JavaScript デバッガーは、JavaScript 開発者にとって最も便利なツールです。これを使用すると、開発者は実行時にコードを開いて編集したり、ブレークポイントを設定したり、コードをステップ実行したり、一度に JavaScript を 1 行ずつ Web サイトの状態を確認したりできます。
ネットワークパネル –ネットワークおよびブラウザーのキャッシュからのリクエストと応答を監視および検査できます。
パフォーマンスパネル –実行時のパフォーマンス データを記録する役割を果たします。実行時のパフォーマンスは、ページの読み込み時ではなく実行時のパフォーマンスです。
メモリパネル –メモリの問題は、パフォーマンスの問題の主な原因となる可能性があります。これにより、時間の経過とともにページが応答しなくなり、遅れが生じる可能性があります。メモリ パネルでは、システム リソースの使用量を測定し、さまざまなコード実行状態でのヒープ スナップショットを比較できます。
アプリケーションパネル –いくつかの興味深い Web ページのプロパティが表示されます。パネルからストレージ、データベース、キャッシュを検査および管理できます。
セキュリティパネル –現在閲覧しているページが安全かどうかを確認できます。また、その起源を調べることもできます。開発者はこれを使用してセキュリティ問題をデバッグし、HTTPS が適切に実装されていることを確認できます。
監査委員会 –一目瞭然なので、特別な説明は必要ありません。この機能を使用すると、Web サイトを監査できます。得られた結果は、Web サイトの品質の向上に役立ちます。
読む:Edge DevTools でプロファイリング セッションを開始中にエラーが発生しました。
2]拡張機能
Edge は拡張機能をサポートしていますが、現時点では DevTool で使用できる拡張機能はありません。代わりに、サードパーティの拡張機能ストアから拡張機能をインストールする必要があります。Chrome ウェブストア。
- Edge の左上にある 3 つの点またはメニュー アイコンをクリックします。をクリックしてください拡張機能。
- [拡張機能] ページの左下隅にあるトグルをオンにします。他のストアからの拡張機能を許可します。
- 次に、Chrome ウェブストアに移動し、DevTools で動作する拡張機能 (Facebook の ReAct Developer ツールなど) を開きます。
- クリックして Chrome に追加すると、DevTools 拡張機能が Microsoft Edge に追加されます。
簡単に言えば、これがインストール方法ですEdge の Chrome 拡張機能。
詳細については、次のサイトを参照してください。Microsoft.com。
