DevTools の新機能（Chrome 84）

Kayce Basques
Kayce Basques
X GitHub

新しい [問題] タブでサイトの問題を修正する

ドロワーの新しい [問題] タブは、コンソールの通知疲れや煩雑さを軽減することを目的としています。現在、コンソールはウェブサイトのデベロッパー、ライブラリ、フレームワーク、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 仕様に沿ったものです。

新しい「fulfilled」という用語を使用しているコンソールの例。

V8 バグ: #6751

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

revert キーワードのサポート

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

元に戻すプロパティの値を設定します。

Chromium バグ: #1075437

画像プレビュー

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

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 で console.dir($0) を実行します。

非推奨の [プロパティ] ペイン。

関連資料:

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

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

詳しくは、アプリのショートカットで作業を効率化するをご覧ください。

[Manifest] ペインのアプリ ショートカット。

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

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

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

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

DevTools の新機能

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