DevTools の新機能（Chrome 98）

Jecelyn Yeen

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

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

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

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

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

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

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

アクセシビリティ ツリーの全ページ表示

Chromium の問題: 887173

[変更] タブでより正確な変更を行う

[変更] タブのコード変更は自動的に美しく表示されます。

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

[変更] タブ

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

ユーザーフロー レコーディングのタイムアウトを長く設定する

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

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

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

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

ユーザーフロー レコーディングのタイムアウト設定

Chromium の問題: 1257499

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

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

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

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

ウェブ デベロッパーは、すべてのブラウザで bfcache 向けにページを最適化する方法を理解しておくことが重要です。これにより、特にネットワーク速度やデバイスの動作が遅い環境で、ユーザーのブラウジング体験が大幅に向上します。

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

Chromium の問題: 1110752

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

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

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

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

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

Chromium の問題: 1269674

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

CSS メディア機能の forced-colors は、ユーザー エージェントで強制色モード（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 を再生します。以前は、コンテキスト メニュー（右クリック > [Replay 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 の新機能をご覧ください。

​Lighthouse 監査の「フォーカス可能な要素にはすべて一意の ID が必要です」で、2 つの要素が同じ ID を持つことが示されています

Chromium の問題: 772558

[ソース] パネルの改善

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

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

Chromium の問題: 1241848

その他のハイライト

このリリースで修正された主な点は次のとおりです。

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

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

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

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

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

Reporting API ペイン

Chromium の問題: 1200732

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

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

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

以下のオプションを使用して、新機能、アップデート、DevTools に関連するその他の内容について話し合います。

DevTools の新機能

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