これらは、Microsoft Edge の Stable リリースの最新の DevTools 機能です。
ビデオ: Microsoft Edge |DevTools 101 の新機能
コンソール ツールを Visual Studio Code で使用できるようになりました
コンソールは、DevTools で最も人気のあるツールの 1 つです。 Visual Studio Code 用の Microsoft Edge 開発者ツール拡張機能でコンソール ツールにアクセスできるようになりました。 この統合された DevTools コンソールでは、コードのすぐ横にログ メッセージを表示できます。 本体を使用して、以下の操作も行えます。
- JavaScript ステートメントをいくつか試してみてください。
- ウィンドウ オブジェクトにアクセスします。
- コンソール オブジェクト API リファレンスで説明されているように、
Consoleオブジェクトのメソッドを呼び出します。 - コンソール ツール ユーティリティの 関数とセレクタで説明されているように、コンソール ユーティリティを使用して DOM にアクセスします。
コンソールをメイン ツールとして使用することも、 要素 ツールや ネットワーク ツールと一緒に使用することもできます。
Visual Studio Code 用の Microsoft Edge DevTools 拡張機能のメイン ツールバーで開くコンソール ツール:
Visual Studio Code 用の Microsoft Edge DevTools 拡張機能の ドロワー で開いているコンソール ツール:
詳細については、「 コンソール統合」を参照してください。
ソース マップが IndexedDB でキャッシュされるようになりました
以前のバージョンの Microsoft Edge では、サーバーまたは Azure Artifacts シンボル サーバーで大規模なソース マップ ファイルをホストしていた場合、DevTools はページが更新されるたびにこれらのソース マップを取得していました。 これらのソース マップを取得すると、DevTools に対するより多くのネットワーク要求が繰り返し作成され、デバッグの速度が低下しました。
Microsoft Edge 101 では、DevTools は IndexedDB を使用してソース マップをキャッシュします。 ページを更新すると、ソース マップは、サーバーまたは Azure Artifacts シンボル サーバーから再度要求されるのではなく、IndexedDB キャッシュから提供されるようになりました。 ソース マップ モニター ツールの [読み込みの状態] 列を使用して、ソース マップがキャッシュから読み込まれていることを確認します。 IndexedDB キャッシュをクリアし、強制的に DevTools にソース マップの再読み込みをさせるには、コマンド メニューで [ソース マップ キャッシュのクリア] コマンドを実行します。
Web ページを初めて読み込むと、 ソース マップ モニター ツールはソース マップがまだキャッシュされていないことを示します。
Web ページを再読み込みすると、 ソース マップ モニター ツールに、キャッシュされたソース マップが使用されていることが示されます。
HAR ファイルをエクスポートするときに保留中のネットワーク要求を追跡する
Microsoft Edge 101 では、新しい [状態] テキスト 列が ネットワーク ツールに追加されました。 [状態] テキスト列には、[状態] 列で報告される HTTP 状態コードと同等の人間が判読できる同等のメッセージが表示されます。
さらに、ネットワーク ツールに新しい設定が追加されました。 保留中の要求を HAR ファイルに含める。 ネットワーク ツールで HAR ファイルをエクスポートするときに 保留中の ネットワーク要求を記録する必要がある場合は、[ 保留中の要求を HAR ファイルに含める] 設定をオンにします。 [ 状態] テキスト 列に、保留中のネットワーク要求の (保留中の) 状態が含まれるようになります。
![ネットワーク ツールの [ステータス テキスト] 列](devtools-101-images/status-text-column-network-tool.png)
要求ログで使用できる列の詳細については、「 ネットワーク機能リファレンス > 列の追加または削除」を参照してください。
3D ビューでの UI とカメラ コントロールの更新
Microsoft Edge 101 の 3D ビュー ツールには、 パン ビュー (![[パン ビュー] アイコン](devtools-101-images/pan-view-icon.png){kind=icon}
) と [回転ビュー ] ([![回転ビュー] アイコン](devtools-101-images/rotate-view-icon.png){kind=icon}
) の 2 つの新しいボタンがあります。 これらのボタンを使用して、キャンバスの周りのパンまたはキャンバスの回転を切り替えます。 [ パン ビュー ] または [回転ビュー ] ボタンをクリックし、マウスで目的の方向にドラッグするか、方向キーを使用します。
UI で、より均一で直感的なエクスペリエンスが提供されるようになりました。 ウィンドウがより明確に整理され、アクセシビリティの問題が修正されました。
「 3D ビュー ツールを使用して Web ページ レイヤー、z-index、および DOM を移動する」を参照してください。
テーマを切り替えるときに DevTools を再読み込みする必要がなくなりました
以前のバージョンの Microsoft Edge では、DevTools でテーマを切り替えるには、新しいテーマを適用するために DevTools を再読み込みする必要がありました。 Microsoft Edge 101 では、DevTools を再読み込みすることなく、さまざまなテーマをすばやく試すことができます。
Chromium プロジェクトからのお知らせ
Microsoft Edge 101 には、Chromium プロジェクトからの次の更新プログラムも含まれています。