DevTools の新機能（Chrome 98）

プレビュー機能: アクセシビリティ ツリーの全ページ表示

新しいページ全体のユーザー補助機能ツリーを使用すると、ページ全体のユーザー補助機能ツリーの概要を簡単に把握し、ウェブ コンテンツが支援技術にどのように公開されているかをより深く理解できます。

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

このアイコンをクリックすると、アクセシビリティ ツリーの全ページ表示ビューに切り替わります。ノードを展開したり、クリックして [アクセシビリティ] ペインで詳細を確認したりできます。

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

以前は、ユーザー補助ツリーは [ユーザー補助] ペインで利用できました。ビューは制限されており、単一のノードとその祖先のみを探索できます。

Google のチームは現在もこのプレビュー機能に全力で取り組んでおります。さらなる機能強化に向けて、皆様からのフィードバックをお待ちしております。

Chromium の問題: 887173

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

[変更] タブのコード変更は自動的に整形されます。

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

Chromium の問題: 1238818、1268754、1086491

ユーザーフローの記録のタイムアウトを長く設定

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

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

この問題を解決するには、新しい [タイムアウト] 設定を使用します。メニュー項目をクリックする手順を開きます。タイムアウトを追加してステップを編集し、6000 ミリ秒（6 秒）に設定します。

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

Chromium の問題: 1257499

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

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

新しい [Back/forward cache] タブでは、ページをテストして、bfcache 向けに最適化されているかどうかを確認したり、bfcache が適用されない原因となる問題を特定したりできます。

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

ウェブ デベロッパーは、すべてのブラウザで bfcache 用にページを最適化する方法を知っておくことが重要です。この機能を使うと、特にネットワーク速度やデバイスの動作が遅い環境で、ユーザーのブラウジング体験が大幅に向上するからです。

Chromium の問題: 1110752

[プロパティ] ペインの新しいフィルタ

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

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

これらの機能強化により、関心のあるプロパティにすばやくアクセスできるようになり、生産性が向上します。

Chromium の問題: 1269674

CSS 強制色のメディア特性をエミュレートする

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

コマンド メニューを開き、レンダリングを表示コマンドを実行して、[CSS メディア特性 forced-colors をエミュレート] プルダウンを設定します。

Chromium の問題: 1130859

カーソルを合わせたときに定規を表示するコマンド

これで、コマンド メニューを開いて、[Show rulers on hover] コマンドを実行できるようになりました。ページ ルーラーを使用すると、要素の幅と高さを簡単に測定できます。

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

Chromium の問題: 1270562

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

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

Chromium の問題: 1263866

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

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

[ネットワーク] パネルで 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 が実行されるようになりました。Lighthouse に、同じ ID を共有するすべての要素がリスト表示されるようになりました。

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

アップデートの詳細については、Lighthouse 9.0 の新機能をご覧ください。

​

Chromium の問題: 772558

[ソース] パネルの改善

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

• サイズの大きいファイル（WASM、JavaScript など）を開く際の速度が大幅に向上
• コードのステップ実行時にランダムにスクロールしなくなる
• 編集可能なソース（スニペット、ローカル オーバーライドなど）の自動補完候補を改善

Chromium の問題: 1241848

その他のハイライト

このリリースでの重要な修正は次のとおりです。

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

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

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

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

Reporting API を使用して、セキュリティ違反や非推奨の API 呼び出しなどをモニタリングする方法を学びます。

Chromium の問題: 1200732

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

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

Chrome DevTools チームに問い合わせる

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

• フィードバックや機能のリクエストは、crbug.com からお送りください。
• DevTools の more_vert その他アイコン > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容の一覧。