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

DevTools の新機能（Chrome 98）

Jecelyn Yeen

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

[要素] パネルで [ユーザー補助機能] ペインを開き、[全ページアクセシビリティツリーを有効にする] チェックボックスをオンにします。その後、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 強制色メディア機能をエミュレートする

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

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

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 が実行中になりました。同じ ID を持つすべての要素が Lighthouse に表示されます。

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

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

「すべてのフォーカス可能な要素には一意の `id` が必要であり、2 つの要素がどちらも同じ `id` である」という Lighthouse の監査では、

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 呼び出しなどを監視する方法を学びます。

[Reporting API] ペイン

Chromium の問題: 1200732

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

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

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

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

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