DevTools の新機能 (Microsoft Edge 85)

これらは、Microsoft Edge の Stable リリースの最新の DevTools 機能です。

Microsoft Edge DevTools チームからのお知らせ

CSS グリッド デバッグ機能

Microsoft Edge DevTools チームは、Chrome DevTools チームおよび Chromium コミュニティと協力して、新しい CSS グリッド デバッグ機能を DevTools に追加しています。 グリッド線番号、グリッドギャップ、拡張グリッド線をページ オーバーレイとして表示できるようになりました。 さらに、グリッド ツールのさらなる改善が間もなく行われます。

更新: この機能はリリースされ、実験的な機能ではなくなりました。

サンプルを使用して実験を試すには、「 CSS グリッド プランナーの例」を参照してください。

Chromium問題 #1047356

関連項目:

• CSS グリッド レイアウトの検査

ネットワーク コンソールを使用した編集および再生要求

ネットワーク コンソールを使用して、ネットワーク ログ内の要求に対して編集と再生を使用できるようになりました。 ネットワーク ログを開き、右クリックして、[編集と再生] を選択します。

DevTools の下部にあるクイック ビュー パネルで新しいネットワーク コンソール ツールが開き、HTTP 要求の情報が自動的に入力されます。 サーバーから返された応答を表示するには、要求を編集し (必要な場合)、 [ 送信] を選択します。

ネットワーク コンソールを使用して、DevTools から直接 HTTP 要求を作成および送信することもできます。

ヒント: クイック ビュー パネルではなく、メイン (上部) パネルにネットワーク コンソールを表示するには、以下の「パネル間でツールを移動する」を参照してください。

更新: この機能はリリースされ、実験的な機能ではなくなりました。

Chromium問題 #1093687

サービス ワーカーが respondWith [タイミング] タブのイベントを使用する

ネットワーク ツールの [タイミング] タブにrespondWithサービス ワーカー イベントが含まれるようになりました。 respondWith サービス ワーカー イベントは、サービス ワーカー fetch イベント ハンドラーの実行が開始する直前の時間から、fetch ハンドラーのrespondWith Promise が決済される時刻までの期間を示します。

[受け取った応答] を展開して、CacheStorageCacheName、serviceWorkerResponseSource、ResponseTimeなど、fetch応答からの追加情報を表示します。

Chromium問題 #1066579

関連項目:

• [ネットワーク機能リファレンス] で要求のタイミング関係を表示します。
• [ネットワーク機能リファレンス] で要求のタイミング ブレークダウンを表示します。

[問題] パネルの webhint フィードバック

2026 年 7 月更新: webhint は Microsoft Edge 151 で削除されました。

Webhint は、Web サイトのアクセシビリティ、クロスブラウザー互換性、セキュリティ、パフォーマンス、PWA、その他の一般的な Web 開発の問題に関するリアルタイムのフィードバックを提供するオープンソース ツールです。 [ 問題] パネルで webhint フィードバックを表示できます。

実験を有効にするには、「 実験をオンまたはオフにする」 を参照し、[ Webhint を有効にする] の横にあるチェック ボックスを選択します。 [ 問題] パネルを開いて、webhint からのフィードバックを表示します。

Chromium問題 #1070378

関連項目:

• Visual Studio Code 向け Webhint 拡張機能

パネル間でツールを移動する

以前は、 要素 や ネットワーク などのツールは、DevTools のメイン (上部) パネルでのみ開くことができました。 同様に、 3D ビュー や 問題 などのツールは、DevTools の下部にある ドロワー (現在の クイック ビュー パネル) でのみ開くことができました。 上部パネルと下部パネルの間でツールを移動することで、DevTools レイアウトをカスタマイズできるようになりました。

更新: この機能はリリースされ、実験的な機能ではなくなりました。

Chromium問題 #897944

関連項目:

• DevTools の概要のアクティビティ バーとクイック ビュー ツールについて。

ネットワーク パネルのイニシエーターのヒントの改善

Microsoft Edge 83 および 84 では、水平スクロール バーで表示される ネットワーク ログ のイニシエーター列のツールヒント。リソース要求の原因が表示されます。 要求を開始した呼び出し履歴は、ツールヒントを水平方向にスクロールすることによってのみ表示できました。

Microsoft Edge 85 から、水平方向にスクロールせずにヒントにイニシエーター呼び出し履歴を表示できるようになりました。

Chromium問題 #1069404

Chromium プロジェクトからのお知らせ

次のセクションでは、オープンソース Chromium プロジェクトに提供された、Microsoft Edge 85 で利用できるその他の機能について説明します。

CSS-in-JS フレームワークのスタイルの編集

[ スタイル] ウィンドウで、 CSS オブジェクト モデル (CSSOM) API を使用して作成されたスタイルの編集が強化されました。 多くの CSS-in-JS フレームワークとライブラリは、内部で CSSOM API を使用してスタイルを構築します。

JavaScript で追加されたスタイルを CSSStyleSheet インターフェイスを使用して編集できるようになりました。これは、 Shadow DOM を使用するときに再利用可能なスタイルを作成して配布する新しい方法です。 CSS オブジェクト モデル (CSSOM) のCSSStyleSheetインターフェイスを参照してください。

たとえば、CSSStyleSheet (CSSOM API) で追加されたh1スタイルは、以前は編集できませんでした。 スタイルは、[ スタイル] パネルで編集できるようになりました。

CSS-in-JS を使用するサンプルでこの機能を試してみてください。 CSS-in-JS フレームワークのスタイル編集を参照してください。

Chromium問題 #946975

Lighthouse パネルの Lighthouse 6

Lighthouse パネルでは Lighthouse 6 が実行されるようになりました。 すべての変更の完全な一覧については、 v6.0.0 リリース ノートを参照してください。

Lighthouse 6.0 では、レポートに最大コンテンツ ペイント (LCP)、累積レイアウト シフト (CLS)、総ブロック時間 (TBT) という 3 つの新しいメトリックが導入されています。

パフォーマンス スコアの数式も、ユーザーの読み込みエクスペリエンスをより適切に反映するために再重み付けされました。

Chromium問題 #772558

関連項目:

• ライトハウス ツール

First Meaningful Paint の非推奨

First Meaningful Paint (FMP) は、Lighthouse 6.0 で非推奨となりました。 FMP も パフォーマンス ツールから削除されました。 FMP の推奨される代替品は、Largest Contentful Paint です。

Chromium問題 #1096008

関連項目:

• MDN の用語集での最初の意味のあるペイント (FMP)。
• MDN の用語集で最大のコンテンツフル ペイント (LCP)。
• MDN の LargestContentfulPaint。
• ライトハウス ツール

新しい JavaScript 機能のサポート

DevTools では、最新の JavaScript 言語機能の一部がより適切にサポートされるようになりました。

• オプションのチェーン 構文のオートコンプリート。 コンソールでのプロパティのオートコンプリートで、オプションのチェーン構文がサポートされるようになりました。たとえば、name?. は name. と name[ に加えて機能するようになりました。

• プライベート フィールドの構文の強調表示。 プライベート クラス フィールドが構文で適切に強調表示され、[ ソース] パネルできれいに印刷されるようになりました。

• Nullish 合体演算子の構文強調表示。 DevTools は、[ ソース] パネルに nullish 合体演算子を適切に整形出力するようになりました。

Chromium問題 #1073903、#1083214、#1083797

関連項目:

• コンソールで JavaScript を実行する
• JavaScript のデバッグ機能

マニフェスト ウィンドウの新しいアプリ ショートカットの警告

アプリケーション ツールのアプリ ショートカットを使用すると、ユーザーが Web アプリ内で共通または推奨されるタスクをすばやく開始できます。

アプリケーション ツールのマニフェスト ウィンドウに、次の条件に関する警告が表示されます。

• アプリのショートカット アイコンが 96x96 ピクセル未満の場合。
• アプリのショートカット アイコンとマニフェスト アイコンが正方形でない場合 (アイコンは無視されるため)。

Chromium問題 #955497

関連項目:

• ストレージを管理するためのアプリケーション ツール

計算ウィンドウの一貫した表示

要素ツールの[計算] ウィンドウは、すべてのビューポート サイズで一貫してウィンドウとして表示されるようになりました。 以前は、DevTools が狭い場合、[ 計算] ウィンドウは [ スタイル ] ウィンドウ内にマージされていました。

Chromium問題 #1073899

関連項目:

• CSS 機能リファレンスで要素に実際に適用されている CSS のみを表示します

WebAssembly ファイルのバイトコード オフセット

Chromium問題 #1071432

関連項目:

• メモリ インスペクター ツールを使用して JavaScript ArrayBuffer を検査する

[ソース] パネルでの行単位のコピーと切り取り

[ ソース] パネル エディターで選択なしでコピーまたは切り取りを実行すると、DevTools はコンテンツの現在の行をコピーまたは切り取ります。

Chromium問題 #800028

本体設定の更新

同じ本体メッセージをグループ化解除する

[本体設定] の [ グループ化] トグルが重複するメッセージに適用されるようになりました。 以前は類似のメッセージにのみ適用されていました。

たとえば、以前は [類似グループ化] のチェックが解除されていても、DevTools はhello メッセージのグループ化を解除しませんでした。 これで、 hello メッセージのグループ化が解除されます。

重複するメッセージをコンソールに送信するサンプルで、この機能を試してみてください。

Chromium問題 #1082963

関連項目:

• コンソール機能リファレンスでメッセージのグループ化をオフにする

選択したコンテキストのみの設定を保持する

本体設定の [選択したコンテキスト のみ] 設定が永続化されるようになりました。 以前は、DevTools を閉じて再度開くたびに設定がリセットされていました。 この変更により、設定動作が他の本体設定オプションと一致します。

Chromium問題 #1055875

関連項目:

• さまざまな JavaScript コンテキストからのメッセージをフィルター処理する - コンソール機能リファレンス

パフォーマンス パネルの更新

パフォーマンス ツールの JavaScript コンパイル キャッシュ情報

JavaScript コンパイルのキャッシュ情報が、パフォーマンス ツールの [概要] パネルに常に表示されるようになりました。 以前は、コード キャッシュが発生しなかった場合、DevTools ではコード キャッシュに関連するものが表示されませんでした。

Chromium問題 #912581

関連項目:

• パフォーマンス機能リファレンス

[パフォーマンス] パネルでのナビゲーションのタイミングの調整

以前は、 パフォーマンス ツールは、記録の開始時刻に基づいてルーラーの時間を表示していました。 ユーザーが移動する場所での録画のタイミングが変更されました。 DevTools では、記録の開始時点ではなく、ナビゲーションを基準としたルーラー時間が表示されるようになりました。

DOMContentLoaded、最初のペイント、最初のコンテンツフル ペイント、および最大のコンテンツ ペイント イベントの時間は、ナビゲーションの開始を基準にして更新されます。つまり、タイミングはPerformanceObserverによって報告されたタイミングと一致します。

Chromium の問題 #974550

関連項目:

• パフォーマンス機能リファレンス

ブレークポイント、条件付きブレークポイント、ログポイントの新しいアイコン

更新: 2022 年の時点で、ブレークポイントは赤い円ではなく青い四角形で示されるようになりました。

[ ソース] パネルには、ブレークポイント、条件付きブレークポイント、ログポイントの新しいデザインがあります。 ブレークポイントは、 Visual Studio Code や Visual Studio と同様に赤い円で表されます。 条件付きブレークポイントとログポイントを区別するためのアイコンが追加されました。

Chromium問題 #1041830

関連項目:

• ブレークポイントを使用してコードを一時停止する

この著作物は、 Creative Commons Attribution 4.0 International License に従って使用許諾されています。

関連項目

• Microsoft Edge DevTools の新機能
• Microsoft Edge Web プラットフォームのリリース ノート