これらは、Microsoft Edge の Stable リリースの最新の DevTools 機能です。
ビデオ: Microsoft Edge |DevTools 100 の新機能
GitHub の Microsoft Edge DevTools コミュニティに参加する
GitHub で新しい MicrosoftEdge > DevTools リポジトリを発表できることを嬉しく思います。 この新しいリポジトリは、開発者のコミュニティが DevTools を改善するためのアイデア、フィードバック、提案、ヒントを送信する場所です。 DevTools がどのようにお客様のニーズにより適切に対応し、優れた Web エクスペリエンスを構築する上で日々直面する課題に対処できるかについて、お客様とお話しできることを楽しみにしています。
GitHub の DevTools リポジトリにアクセスして、Edge DevTools コミュニティの一員になりましょう。
ノード タイプ別にヒープ スナップショットの概要をフィルター処理する
メモリ ツールでヒープ スナップショット内のすべてのオブジェクトを見るときに、特定のオブジェクトや保持パスに焦点を合わせるのが難しい場合があります。 Microsoft Edge 100 では、ヒープ スナップショットを確認するときに新しいノードの種類フィルターを使用して、特定の種類のノードのみに注目できるようになりました。 たとえば、ヒープ内の配列と文字列オブジェクトのみを表示するには、[ノードの種類] フィルターで [配列] と [文字列] エントリを選択します。
関連項目:
- メモリ ツール ("ヒープ スナップショット" プロファイリングの種類) を使用してヒープ スナップショットを記録し、ヒープ スナップショットを取得してヒープを分析します。
チェコ語とベトナム語で DevTools を使用する
開発者エクスペリエンスのカスタマイズと簡素化には、優先言語に関係なく、すべてのユーザーがツールを利用できるようにすることが含まれます。 サポートされている言語のリストにチェコ語とベトナム語の 2 つの新しい言語が追加されました。今後も追加される予定です。 DevTools で希望する言語がサポートされていない場合は、お知らせください。
関連項目:
ネットワーク ツールに要求の処理方法が表示されるようになりました
Microsoft Edge 100 では、 ネットワーク ツールは要求ログの新しい [実行元] 列をサポートしています。 要求がサービス ワーカーによって、またはキャッシュから実行された場合、その情報は [実行元 ] 列で追跡されるようになりました。 要求ログを HAR ファイルとしてエクスポートまたはインポートする場合は、[ 実行元 ] 列の情報も含まれます。
関連項目:
- [ネットワーク機能リファレンス] のプロパティで要求をフィルター処理します。
この機能の履歴については、 問題 #16 を参照してください。
問題ツールで重大度とブラウザー ターゲットでメッセージをフィルター処理する
[問題] ツールの新しい重大度とブラウザーのドロップダウン リストを使用すると、重大度とブラウザー ターゲットでメッセージをフィルター処理して、最も関連性の高いフィードバックに集中できます。 各ドロップダウン リストのオプションを選択または解除できます。
関連するすべてのメッセージを表示するには、ページを更新する必要がある場合があります。 メッセージが表示されたら、[ 問題 ] ツールで [ 問題の再生成 ] ボタンをクリックします。
既定では、重大 度 フィルターは警告とエラーのみを表示するように設定されています。
ブラウザー フィルターは、ブラウザーの互換性に関するフィードバックにのみ適用されます。これは、[問題] リストの [互換性] セクションに表示されます。 既定では、 ブラウザー フィルターは、 Browserslist で定義されている上位のブラウザーのメッセージを表示します。
以下の例では、Firefox と Android 版 Firefox に関するメッセージは除外されます。
関連項目:
- [問題の検索] ツールを使用して問題をフィルター処理します。
パフォーマンス プロファイルをインポートするときに、リンクが元のコードにマップされるようになりました
パフォーマンス プロファイルを記録すると、 パフォーマンス ツールのフレーム チャートには、メイン スレッドの各イベントから ソース ツールの対応する JavaScript 関数へのリンクが表示されます。 ただし、パフォーマンス プロファイルをエクスポートおよびインポートすると、これらのリンクは解除されます。
Microsoft Edge 100 では、インポートされたパフォーマンス プロファイルからのリンクが、Azure Artifacts シンボル サーバーからのソース マップを使用して、使い慣れた元のソース コードにマップされるようになりました。 エクスポートされたパフォーマンス トレースのソース マップを解決するために必要な情報がプロファイルに含まれるように、パフォーマンス プロファイルは Microsoft Edge 100 (以上) でエクスポートされている必要があります。
関連項目:
- デバッグ用に、処理されたコードを元のソース コードにマップする
- ソース マップを Azure 成果物シンボル サーバーに発行して、元のコードを安全にデバッグする
- シンボル サーバー ソース マップを使用して、元の Azure 成果物を安全にデバッグする
修正: ネットワーク ツールのウォーターフォール ビューが Visual Studio Code のテーマと一致するようになりました
更新: Microsoft Edge 131 以降では、Visual Studio Code のテーマ機能は削除され、そのようなテーマは既定のテーマに戻ります。
- Light+
- Dark+
以前のバージョンの Microsoft Edge では、ネットワーク ツールの要求のウォーターフォール ビューが、他の DevTools に適用される Visual Studio Code のテーマと一致しませんでした。 Microsoft Edge 100 では、この問題が修正されています。
Microsoft Edge 100 より前では、選択したテーマはウォーターフォール ビューに適用されませんでした。
Microsoft Edge 100 では、選択したテーマがネットワーク ツールの要求のウォーターフォール ビューに適用されます。
関連項目:
- ネットワーク機能リファレンス - ネットワーク ツールの要求のウォーターフォール ビューで要求のタイミング関係を表示します。
Chromium プロジェクトからのお知らせ
Microsoft Edge バージョン 100 には、Chromium プロジェクトからの次の更新プログラムも含まれています。
- View and edit @supports at rules in the Styles pane
- ホバー時にクラス/関数プロパティをプレビューする
- [パフォーマンス] パネルで部分的に表示されるフレーム