DevTools の新機能（Chrome 98）

Jecelyn Yeen

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

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

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

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

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

これまで、アクセシビリティ ツリーは [ユーザー補助] ペインで利用可能でした。このビューは制限付きで、単一のノードとその祖先のみを探索できます。

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

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

Chromium の問題: 887173

[変更] タブでより正確な変更を加える

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

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

[変更] タブ

Chromium の問題: 1238818、1268754、1086491

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

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

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

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

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

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

Chromium の問題: 1257499

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

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

新しい [前方/後方キャッシュ] タブでは、ページをテストして 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 を再実行し、すべての検索結果を展開するための新しいキーボード ショートカット

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

[ネットワーク] パネルで 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 の新機能シリーズで取り上げられたすべての内容のリスト。