DevTools の新機能（Chrome 84）

Kayce Basques

新しい [問題] タブでのサイトの問題の解決

ドロワーの新しい [問題] タブは、コンソールの通知疲れや混乱を軽減することを目的としています。現在、コンソールはウェブサイトのデベロッパー、ライブラリ、フレームワーク、Chrome 自体がメッセージ、警告、エラーを記録する中心的な場所となっています。[問題] タブには、ブラウザからの警告が構造化され、集約され、対応可能な形で表示されます。また、DevTools 内の該当するリソースへのリンクや、問題の解決方法に関するガイダンスも提供されます。今後、Chrome の警告はコンソールではなく [問題] タブに表示されるようになり、コンソールの煩雑さが軽減される予定です。

まず、Chrome DevTools の [問題] タブで問題を検出して修正するをご覧ください。

Chromium バグ: #1068116

検証モードのツールチップでのユーザー補助に関する情報の表示

検査モードのツールチップで、要素にユーザー補助機能用の名前とロールが設定されているかどうか、キーボードでフォーカス可能かどうかを確認できるようになりました。

Chromium バグ: #1040025

[パフォーマンス] パネルの更新

フッターに Total Blocking Time（TBT）の情報を表示する

読み込みパフォーマンスを記録すると、[パフォーマンス] パネルのフッターに [合計ブロック時間]（TBT）の情報が表示されるようになりました。TBT は、ページが使用可能になるまでの時間を定量化するのに役立つ読み込みパフォーマンス指標です。これは、コンテンツが画面にレンダリングされているため、ページが使用可能に見えるものの、JavaScript がメインスレッドをブロックしているため、ページがユーザー入力に応答できない状態がどれだけ続いたかを測定するものです。TBT は、Google の新しいウェブに関する主な指標の 1 つである初回入力遅延を近似する主なラボ指標です。

合計ブロック時間の情報を取得するには、ページ読み込みのパフォーマンスを記録する Reload Page ワークフローを使用しないでください。代わりに、[Record] をクリックし、ページを手動で再読み込みして、ページの読み込みを待ってから録画を停止します。Total Blocking Time: Unavailable が表示された場合は、DevTools が Chrome の内部プロファイリング データから必要な情報を取得できなかったことを意味します。

Chromium バグ: #1054381

新しい [エクスペリエンス] セクションのレイアウト シフト イベント

パフォーマンス パネルの新しい [エクスペリエンス] セクションでは、レイアウト シフトを検出できます。Cumulative Layout Shift（CLS）は、望ましくない視覚的な不安定さを定量化するのに役立つ指標で、Google の新しいウェブに関する主な指標の 1 つです。

[レイアウト シフト] イベントをクリックすると、[概要] タブにレイアウト シフトの詳細が表示されます。[移動元] フィールドと [移動先] フィールドにカーソルを合わせると、レイアウト シフトが発生した場所を可視化できます。

コンソールでの約束の用語の精度向上

Promise をロギングするときに、コンソールで Promise の状態が resolved と誤って記述されていました。

コンソールで fulfilled という用語が使用されるようになりました。これは、Promise 仕様に沿ったものです。

V8 バグ: #6751

[スタイル] ペインの更新

revert キーワードのサポート

[スタイル] ペインのオートコンプリート UI で、revert CSS キーワードが検出されるようになりました。このキーワードは、プロパティのカスケード値を、要素のスタイル設定が変更されなかった場合の値に戻します。

Chromium バグ: #1075437

画像のプレビュー

[スタイル] ペインの background-image 値にカーソルを合わせると、ツールチップに画像のプレビューが表示されます。

Chromium バグ: #1040019

カラー選択ツールでスペース区切りの関数型色表記を使用するようになりました

CSS Color Module Level 4 では、rgb() などの色関数がスペース区切りの引数をサポートする必要があることが規定されています。たとえば、rgb(0, 0, 0) は rgb(0 0 0) と同じです。

カラー選択ツールで色を選択するか、Shift キーを押しながら色の値をクリックして [スタイル] ペインで色の表現を切り替えると、スペースで区切られた引数構文が表示されるようになりました。

構文は、[計算済み] ペインと [検査モード] のツールチップにも表示されます。

DevTools で新しい構文が使用されているのは、color() などの今後の CSS 機能では、非推奨のカンマ区切りの引数構文がサポートされないためです。

スペース区切りの引数構文は、ほとんどのブラウザでしばらく前からサポートされています。スペース区切りの機能色表記を使用できますか？をご覧ください。

Chromium のバグ: #1072952

[要素] パネルの [プロパティ] ペインの非推奨化

[要素] パネルの [プロパティ] ペインが非推奨になりました。代わりに、コンソールで console.dir($0) を実行します。

関連資料:

• console.dir()
• $0

マニフェスト ペインでのアプリのショートカットのサポート

アプリのショートカットを使用すると、ユーザーはウェブアプリ内で一般的なタスクやおすすめのタスクを簡単に開始できます。アプリのショートカット メニューは、ユーザーのパソコンやモバイル デバイスにインストールされているプログレッシブ ウェブアプリでのみ表示されます。

詳しくは、アプリのショートカットを使ってすばやくタスクを完了するをご覧ください。

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

• フィードバックや機能リクエストは、crbug.com からお送りください。
• DevTools のその他 more_vert > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告してください。
• @ChromeDevTools をメンションしてツイートしてください。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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