DevTools の新機能 (Chrome 98)

公開日 2022年1月13日木曜日 • 更新日 2022年1月13日木曜日

翻訳先言語： English, Español, Português, 한국어, 中文, Pусский

Google で Chrome DevTools に取り組んでいる Developer Advocate です。

翻訳者の lacolaco さん、レビュアーの yoichiroさんと technohippy さんに感謝いたします。

DevTools の改善に興味がある方はサインアップして Google User Research にご協力ください。

新しい フルページアクセシビリティツリー は、ページ全体のアクセシビリティツリーの概要を簡単に把握でき、Webコンテンツが支援技術にどう認識されるのかをより理解できるようにするためのものです。

Elements パネルで、 Accessibilty ペインを開き、 Enable full-page accessibility tree チェックボックスを選択します。その後、 DevTools をリロードすると、 Elements パネルに新しいアクセシビリティボタンが表示されます。

クリックすると、フルページアクセシビリティツリー表示に切り替わります。ノードを展開したり、クリックすると、 Accessibility ペインで詳細を見ることができます。

以前は、アクセシビリティツリーは Accessibility ペインで利用できました。このビューは限定的で、1つのノードとその祖先を探索することしかできません。

私たちのチームは、このプレビュー機能に対してまだ活発に取り組んでいます。さらなる強化のため、皆様からのフィードバックをお待ちしています!

Chromium issue: 887173

Changes タブで変更点のよりわかりやすい表示

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

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

Chromium issues: 1238818, 1268754 , 1086491

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

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

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

これを解決するために、新しい Timeout 設定を使用することができます。メニュー項目をクリックしたステップを展開します。 Add timeout でステップを編集し、6000 ミリ秒 (6秒と等しい) に設定します。

Replay settings の中ですべてのステップの Timeout を調整することができます。 Replay settings を展開し、 Timeout の値を編集します。

Chromium issue: 1257499

Back/forward cache タブでページがキャッシュ可能であることを確認する

Back/forward cache (または bfcache) は、高速な戻る、進むを可能にするブラウザの最適化です。

新しい Back/forward cache タブは、ページが bfcache に最適化されているかどうかをテストし、対象外となる可能性がある問題を特定するのに役立ちます。

特定のページをテストするには、 Chrome でそのページに移動し、 DevTools で Application > Back-forward Cache に移動してください。次に、 Test back/forward cache ボタンをクリックすると、 DevTools はページをいったん離れた後で戻ろうと試み、 bfcache から復元できるかどうかを判断します。

Web 開発者は、すべてのブラウザで bfcache 用にページを最適化する方法を知っておくことが重要です。bfcache は、ユーザー、特に低速なネットワークやデバイスを使用するユーザーのブラウジング体験を大幅に改善します。

Chromium issue: 1110752

新しい Properties ペインのフィルター

Properties ペインで特定のプロパティにフォーカスしたい場合、新しい Filter テキストボックスにそのプロパティ名または値を入力することができるようになりました。

デフォルトでは、値が null または undefined であるプロパティは表示されません。すべてのプロパティを表示するには、 Show all のチェックボックスを有効にします。

これらの強化により、気になるプロパティに迅速にアクセスできるようになり、生産性が向上します!

Chromium issue: 1269674

CSS の force-colors メディア機能のエミュレート

forced-colors CSS メディア機能は、ユーザーエージェントが強制カラーモード（例： Windows High Contrast mode）を有効にし、ユーザーが選んだ限定カラーパレットをページに強制しているかどうかを検出するために使用されます。

Command Menu を開き、 Show Rendering コマンドを実行し、 Emulate CSS media feature forced-colors ドロップダウンを設定します。

Chromium issue: 1130859

ホバー時にルーラーを表示するコマンド

Command Menu を開き、 Show rulers on hover コマンドを実行できるようになりました。ページルーラーを使うと、要素の幅や高さを簡単に測れるようになります。

これまでは、 Settings > Show rulers のチェックボックスでのみページルーラーの表示が可能でした。

Chromium issue: 1270562

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

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

Chromium issue: 1263866

XHR のリプレイと全検索結果の展開に新しいキーボードショートカットを追加

ネットワークパネルで XHR をリプレイするためのキーボードショートカット

Network パネルで XHR リクエストを選択し、キーボードの R キーを押すと XHR がリプレイされます。以前は、コンテキストメニュー（右クリック > Replay XHR ）を介してのみ XHR をリプレイすることができました。

Chromium issue: 1050021

検索結果をすべて展開するキーボードショートカット

Search タブに新しいショートカットが追加され、すべての検索結果を展開したり折りたたんだりできるようになりました。これまでは、1ファイルずつクリックすることで、検索結果を展開したり折りたたんだりすることができました。

Esc > 3点メニュー > Search でタブを開いてください。検索文字列（例：関数）を入力し、 Enter を押すと、検索結果の一覧が表示されます。検索結果にフォーカスし、以下のショートカットで検索ファイルの展開・折りたたみができます。

Windows / Linux - Ctrl + Shift + { or }
MacOS - Cmd + Options + { or }

Chrome DevTools のキーボードショートカットのリファレンスは、キーボードショートカットをご覧ください。

Chromium issue: 1255073

Lighthouse パネルの Lighthouse 9

Lighthouse パネルで Lighthouse 9が動作するようになりました。 Lighthouse は、同じ id を共有するすべての要素をリストアップするようになりました。

要素の id が一意でないことはよくあるアクセシビリティ上の問題です。例えば、 aria-labelledby 属性で参照される id が複数の要素で使用されていることがあります。

アップデートの詳細は、 What's new in Lighthouse 9.0 をご確認ください。

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

Chromium issue: 772558

Sources パネルの改善

CodeMirror 6 を使用するようにアップグレードしたため、 Sources パネルの安定性が大幅に改善されました。以下は、いくつかの主要な改善点です。

大きなファイル（WASM 、 JavaScript など）を開く際の大幅な高速化
コードを読み進める際のランダムなスクロールを解消
編集可能なソース（スニペット、ローカルオーバーライドなど）に対するオートコンプリートの候補を改善

Chromium issue: 1241848

その他のハイライト

今回のリリースでは、以下のような注目の修正点があります。

ネットワークリクエストのウォーターフォール図を正しく表示するようにしました。以前は、スタイルが崩れていました (1275501)
Source パネルで非常に長い行のドキュメントで検索すると、コードハイライトが壊れていました。これは現在修正されています (1275496)
ネットワークリクエストで、 Payload タブが重複しないようになりました (1273972)
Performance パネルの Summary セクションのレイアウトシフトの詳細が欠落していたのを修正しました (1259606)
Network Search のクエリで、任意の文字（例：,や.）をサポートしました (1267196)

[実験的] Reporting API ペインに Endpoints を追加

この実験的機能を有効にするには、 Settings > Experiments にある Enable Reporting API panel in Application panel チェックボックスをオンにします。

Chrome 96 で実験的に導入された Reporting API ペインでは、ページで生成されたレポートとそのステータスを監視することが可能です。

Endpoints セクションが利用可能になりました。これは Reporting-Endpoints ヘッダで設定されたすべてのエンドポイントの概要を提供します。

Reporting API を使用してセキュリティ違反や非推奨の API コールなどを監視する方法を学びましょう。

Chromium issue: 1200732

プレビューチャンネルのダウンロード

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

Chrome DevTools チームとの交流

新しい機能や、この投稿の変更、その他 DevTools に関することであれば何でも、意見があれば以下のいずれかを使用してご連絡ください。

私たちへの提案やフィードバックはcrbug.comから投稿してください。
DevTools の問題は DevTools の More options > Help > Report a DevTools issues を使用してレポートしてください。
@ChromeDevTools 宛にTweetしてください。
What's new in DevTools YouTubeビデオにコメントを残してください。

More DevTools features

関連する機能の完全なリストは、What's New In DevTools の英語版を参照してください。以下は、日本語に翻訳された内容の一部です。