このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 98）

Jecelyn Yeen

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

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

これをクリックすると、[全画面ユーザー補助ツリー] ビューに切り替えることができます。ノードを展開するか、クリックして [ユーザー補助機能] ペインに詳細を表示できます。

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

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

現在、このプレビュー機能の開発に積極的に取り組んでいます。さらに機能を強化するためのフィードバックをお待ちしています。

フルページアクセシビリティツリー

Chromium の問題: 887173

[変更] タブの変更内容の精度が向上

[変更] タブのコード変更は自動的にプリティプリントされます。

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

[変更] タブ

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

ユーザーフロー記録のタイムアウトを延長するように設定

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

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

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

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

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

Chromium の問題: 1257499

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

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

新しい [バックフォワードキャッシュ] タブでは、ページが bfcache 用に最適化されているかどうかをテストしたり、ページの表示を妨げている可能性のある問題を特定したりできます。

特定のページをテストするには、Chrome でそのページに移動し、DevTools で [Application] > [Back-forward Cache] に移動します。次に、[バックフォワードキャッシュをテスト] ボタンをクリックすると、DevTools は別のページに移動して戻り、bfcache からページを復元できるかどうかを判断します。

ウェブデベロッパーにとって、すべてのブラウザで bfcache を使用するようにページを最適化する方法を把握しておくことは重要です。この最適化によって、特に低速のネットワークやデバイスを使用するユーザーのブラウジングエクスペリエンスを大幅に向上させることができます。

[バックフォワードキャッシュ] タブ

Chromium の問題: 1110752

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

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

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

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

プロパティペインフィルタ

Chromium の問題: 1269674

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

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

コマンドメニューを開き、[Show Rendering] コマンドを実行して、[Emulate CSS media feature forced-colors] プルダウンを設定します。

CSS 強制カラーメディア機能

Chromium の問題: 1130859

カーソルを合わせたときにルーラーを表示コマンド

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

これまでは、ページルーラーは [設定] > [ルーラーを表示] チェックボックスからのみ有効にすることができました。

カーソルを合わせたときにルーラーを表示コマンド

Chromium の問題: 1270562

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

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

Flexbox エディタ

Chromium の問題: 1263866

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

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

[Network] パネルで XHR リクエストを選択し、キーボードの R キーを押して XHR を再生します。以前は、コンテキストメニュー（右クリック > [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 の新機能をご確認ください。

「すべてのフォーカス可能な要素には一意の「id」が必要」という Lighthouse の監査。2 つの要素が同じ「id」を持つことが表示されている

Chromium の問題: 772558

ソースパネルの改善

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

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

Chromium の問題: 1241848

その他のハイライト

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

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

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

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

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

Reporting API を使用してセキュリティ違反やサポートが終了した API 呼び出しなどをモニタリングできます。

Reporting API ペイン

Chromium の問題: 1200732

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

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

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

投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。

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