新しいMicrosoftEdge（Chromium）のDevToolsのリスト

新しいMicrosoftEdgeは、Chromiumオープンソースプロジェクトを使用して構築されています。開発者の方は、 Microsoft Edge（Chromium）の開発ツールのリストをご覧ください。 。いくつかの新しいツールがDevToolsリストに追加されました。これにより、開発者はMicrosoftEdgeでWebサイトを簡単かつ迅速に構築およびテストできます。

新しいEdge（Chromium）のDevToolsのリスト

Microsoft Edge（Chromium）DevToolsは、大きく2つのカテゴリに分類できます。

1. コアツール
2. 拡張機能。

1]コアツール

要素パネル– Web開発者にとってDevToolsの最も便利な機能の1つは、ページ上のHTMLとCSSを「ライブ編集」する機能です。 [要素]パネルを使用して、HTMLとCSSの編集、アクセシビリティプロパティの検査、イベントリスナーの表示、およびDOMミューテーションブレークポイントの設定を行うことができます。

コンソール– コンソールツールは通常、JavaScript、ネットワークリクエスト、セキュリティエラーなどのWebページに関連する情報をログに記録します。したがって、問題のトラブルシューティングの最初のステップは、ブラウザコンソールを確認することです。

これが理由です。 Edgeブラウザに専用のコンソールパネルがあります。開発者は、インタラクティブなデバッグ、アドホックテスト、および実行中のWebページとの通信に同じパネルを使用できます。

ソースパネル– これは、JavaScript開発者にとって最も便利なツールであるJavaScriptデバッガーです。これを使用すると、開発者は実行時にコードを開いて編集し、ブレークポイントを設定し、コードをステップスルーして、一度に1行のJavaScriptで自分のWebサイトの状態を確認できます。

ネットワークパネル– ネットワークとブラウザのキャッシュからのリクエストとレスポンスを監視および検査できます。

パフォーマンスパネル– ランタイムパフォーマンスデータの記録を担当します。ランタイムパフォーマンスは、ページの読み込みではなく、実行中のページのパフォーマンスです。

メモリパネル– メモリの問題は、パフォーマンスの問題の主な原因となる可能性があります。時間の経過とともに、ページがますます応答しなくなり、遅延する可能性があります。メモリパネルは、システムリソースの使用量を測定し、コード実行のさまざまな状態でヒープスナップショットを比較できます。

アプリケーションパネル– いくつかの興味深いWebページのプロパティが表示されます。パネルからストレージ、データベース、およびキャッシュを検査および管理できます。

セキュリティパネル– 現在表示しているページが安全かどうかを確認できます。また、その起源を検査することができます。開発者はこれを使用してセキュリティの問題をデバッグし、HTTPSが適切に実装されていることを確認できます。

監査パネル– それは自明であるため、排他的な説明は必要ありません。この機能を使用すると、Webサイトを監査できます。得られた結果は、Webサイトの品質を向上させるのに役立ちます。

読む ：EdgeDevToolsでプロファイリングセッションを開始しているときにエラーが発生しました。

2]拡張機能

Edgeは拡張機能をサポートしていますが、現時点ではDevToolで利用できる拡張機能はありません。代わりに、サードパーティの拡張機能ストアから拡張機能をインストールする必要があります。 Chromeウェブストア。

• Edgeの左上にある3つのドットまたはメニューアイコンをクリックします。 拡張機能をクリックします 。
• [拡張機能]ページの左下隅で、他のストアからの拡張機能を許可するの切り替えをオンにします。
• 次に、Chromeウェブストアに移動し、DevToolsで機能する拡張機能（FacebookのReAct Developerツールなど）を開きます。
• クリックしてChromeに追加すると、DevTools拡張機能がMicrosoftEdgeに追加されます！

簡単に言うと、これがChrome拡張機能をEdgeにインストールする方法です。ただし、MicrosoftがChromiumのサービスと機能の一部を削除したため、純粋なChrome拡張機能が機能する場合と機能しない場合があることに注意してください。

新しいEdgeブラウザーは、Edgeに依存するWebサイトまたはビジネスがある場合、Windows10の次の機能更新で​​利用できるようになります。事前に準備しておくことをお勧めします。

詳細については、Microsoft.comにアクセスしてください。