DevTools の新機能（Chrome 98）

プレビュー機能: 全画面のユーザー補助ツリー

新しい全ページアクセシビリティ ツリーにより、ページ全体のユーザー補助ツリーの概要を簡単に確認できるようになり、ウェブ コンテンツが支援技術にどのように対応しているかをより深く理解できます。

[要素] パネルで [ユーザー補助機能] ペインを開き、[全ページアクセシビリティ ツリーを有効にする] チェックボックスをオンにします。その後、DevTools を再読み込みすると、[要素] パネルに新しいユーザー補助機能ボタンが表示されます。

これをクリックすると、[全画面のアクセシビリティ ツリー] ビューに切り替わります。ノードを開くか、[ユーザー補助] ペインをクリックして詳細を表示できます。

ノードを選択して DOM ツリー表示に戻ります。対応する DOM ノードが選択されました。これは、DOM ノードとそのアクセシビリティ ツリーノードとの間のマッピングを理解するのに最適な方法です。これは DOM ツリー ⬌ ユーザー補助ツリービューでも機能します

これまでは、ユーザー補助機能ツリーは [ユーザー補助機能] ペインに表示されていました。このビューは制限されており、1 つのノードとその祖先のみを探索できます。

このプレビュー機能につきましては、担当チームが現在も開発を進めておりますので、今しばらくお待ちください。さらなる機能改善に関するフィードバックをお待ちしています。

Chromium の問題: 887173

[変更] タブでの変更をより正確に

[Changes] タブのコード変更が自動的にプリティ出力されます。

以前は、すべてのコードが 1 行で表示されるため、圧縮されたソースコードの実際の変更を追跡することが困難でした。

Chromium に関する問題: 1238818、1268754、1086491

ユーザーフロー記録のタイムアウトを延長する

すべてのステップまたは特定のステップについて、レコーダーの [Timeout] 設定を調整できるようになりました。特に、ネットワーク リクエストが遅く、アニメーションが長いページで有用です。

たとえば、こちらのデモページで、メニュー項目の読み込みとクリックを行うユーザーフローを記録しました。ただし、メニュー項目の読み込みは遅い（6 秒かかります）。このユーザーフローの再生は、5 秒（デフォルトのタイムアウト）を超えているため失敗しました。

新しい [タイムアウト] 設定を使用すると、この問題を修正できます。メニュー項目をクリックするステップを開きます。[タイムアウトを追加] でステップを編集し、6,000 ミリ秒（6 秒に相当）に設定します。

必要に応じて、すべてのステップの [リプレイ設定] の [タイムアウト] を調整できます。[リプレイ設定] を開き、[タイムアウト] の値を編集します。

Chromium の問題: 1257499

[バックフォワード キャッシュ] タブでページがキャッシュ可能であることを確認する

バックフォワード キャッシュ（bfcache）は、すぐに前または次のページに移動できるようにブラウザを最適化する機能です。

新しい [バックフォワード キャッシュ] タブは、ページが bfcache 向けに最適化されているかどうかを確認し、表示の妨げとなっている問題を特定するのに役立ちます。

特定のページをテストするには、Chrome でそのページに移動し、DevTools で [Application] > [バックフォワード キャッシュ。次に、[Test back/forward cache] ボタンをクリックすると、DevTools は一度離れてから再び移動し、ページを bfcache から復元できるかどうかを判断します。

ウェブ デベロッパーにとって、すべてのブラウザで bfcache を使用するようにページを最適化する方法を知っておくことは非常に重要です。なぜなら、ユーザーのブラウジング エクスペリエンスが大幅に向上するからです（特に低速なネットワークやデバイスを使用するユーザー）。

Chromium の問題: 1110752

[New Properties] ペインのフィルタ

[プロパティ] ペインで特定のプロパティに注目する場合は、新しい [フィルタ] テキストボックスにそのプロパティ名または値を入力できるようになりました。

デフォルトでは、値が null または undefined のプロパティは表示されません。[すべて表示] チェックボックスをオンにしてすべてのプロパティを表示します。

これらの機能強化により、気になる物件にすばやくアクセスできるようになり、生産性が向上します。

Chromium の問題: 1269674

CSS 強制色メディア機能をエミュレートする

強制色 CSS メディア機能は、ユーザー エージェントが強制色モード（Windows の高コントラスト モードなど）を有効にして、ユーザーが選択した限定カラーパレットをページ上で適用しているかどうかを検出するために使用されます。

コマンド メニューを開いて [表示を表示] コマンドを実行してから、[CSS メディア機能の強制色をエミュレート] プルダウンを設定します。

Chromium の問題: 1130859

マウスオーバー コマンドでルーラーを表示する

コマンド メニューを開いて、[カーソルを合わせてルーラーを表示する] コマンドを実行できるようになりました。ページルーラーを使用すると、要素の幅と高さを簡単に測定できます。

これまでは、ページルーラーを有効にするには、[設定] >[ルーラーを表示] チェックボックスをオンにします。

Chromium の問題: 1270562

Flexbox エディタで row-reverse と column-reverse をサポート

Flexbox エディタに、flex-direction の row-reverse と column-reverse をサポートする 2 つの新しいボタンが追加されました。

Chromium の問題: 1263866

XHR を再生してすべての検索結果を開くための新しいキーボード ショートカット

[Network] パネルで XHR を再生するためのキーボード ショートカット

[Network] パネルで XHR リクエストを選択し、キーボードの R キーを押して XHR を再生します。これまでは、コンテキスト メニュー（右クリック > [XHR を再生]）からのみ XHR を再生できました。

Chromium の問題: 1050021

キーボード ショートカットですべての検索結果を開く

[検索] タブに新しいショートカットが追加され、すべての検索結果を展開したり折りたたんだりできるようになりました。これまでは、検索結果を展開したり折りたたんだりするにはファイルを 1 つずつクリックするだけで済みました。

Esc キーで検索タブを開く >その他メニュー >検索:検索文字列（関数など）を入力して Enter キーを押すと、検索結果のリストが表示されます。検索結果にフォーカスし、次のショートカットを使用して検索ファイルを開いたり閉じたりできます。

• Windows / Linux - Ctrl+Shift+{ または }
• MacOS - Cmd+Options+{ または }

Chrome DevTools のキーボード ショートカットについては、キーボード ショートカットをご覧ください。

Chromium の問題: 1255073

Lighthouse パネルの Lighthouse 9

[Lighthouse] パネルでは、Lighthouse 9 が実行中になりました。同じ ID を持つすべての要素が Lighthouse に表示されます。

要素 ID が一意でないことは、ユーザー補助に関する一般的な問題です。たとえば、aria-labelledby 属性で参照される ID が複数の要素で使用されています。

更新内容について詳しくは、Lighthouse 9.0 の新機能をご覧ください。

​

Chromium の問題: 772558

[Sources] パネルの改善

CodeMirror 6 を使用するようにアップグレードすると、[Sources] パネルに安定性が向上しました。主な改善点は次のとおりです。

• 大きなファイル（WASM、JavaScript など）を開くときの大幅な高速化
• コードをステップ実行する際のランダム スクロールが不要
• 編集可能なソースの予測入力候補を改善（スニペット、ローカルでのオーバーライドなど）

Chromium の問題: 1241848

その他のハイライト

このリリースでの注目すべき修正は次のとおりです。

• ネットワーク リクエストのウォーターフォール図を適切に表示している。以前はスタイルが破損していました。（1275501）。
• [ソース] パネルで、非常に長い行を含むドキュメントを検索すると、コードのハイライトが破損していました。この問題は解決しました。（1275496）。
• ネットワーク リクエストに重複する [ペイロード] タブがなくなりました。（1273972）。
• [Performance] パネルの [Summary] セクションでレイアウト シフトの詳細が表示されない問題を修正しました。（1259606）。
• ネットワーク検索クエリで任意の文字（,、. など）をサポート。（1267196）。

[試験運用版] [Reporting API] ペインのエンドポイント

Chrome 96 で試験運用版の Reporting API ペインが導入されました。これにより、ページで生成されるレポートとそのステータスをモニタリングできます。

[エンドポイント] セクションが利用できるようになりました。Reporting-Endpoints ヘッダーで構成されているすべてのエンドポイントの概要を示します。

Reporting API を使って、セキュリティ違反や非推奨の API 呼び出しなどを監視する方法を学びます。

Chromium の問題: 1200732

プレビュー チャンネルをダウンロードする

デフォルトの開発ブラウザとして Chrome の Canary、Dev、または Beta を使用することを検討してください。これらのプレビュー チャンネルを使用すると、DevTools の最新機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーに先駆けてサイトの問題を検出したりできます。

Chrome DevTools チームへのお問い合わせ

この投稿で紹介した新機能や変更点、またはその他の DevTools に関連する内容について話し合うには、以下のオプションを使用してください。

• ご提案やフィードバックは、crbug.com からお送りください。
• DevTools の問題を報告するには、その他のオプション（） >ヘルプ >DevTools で DevTools の問題を報告します。
• @ChromeDevTools でツイートしてください。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。