DevTools の新機能（Chrome 84）

Kayce Basques

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

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

詳しくは、Chrome DevTools の [問題] タブで問題を見つけて修正するをご覧ください。

[問題] タブ

Chromium のバグ: #1068116

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

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

アクセシビリティに関する情報を含む検証モードのツールチップ。

Chromium のバグ: #1040025

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

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

負荷のパフォーマンスを記録すると、パフォーマンス パネルのフッターに合計ブロック時間（TBT）情報が表示されるようになります。TBT は、ページが使用可能になるまでの時間を定量化できる読み込みパフォーマンス指標です。基本的に、ページが使用可能に見えている（コンテンツが画面にレンダリングされているため）が、JavaScript がメインスレッドをブロックしているため、ページがユーザー入力に応答できないため、実際には使用できない時間です。TBT は、Google の新しいCore Web Vitals の 1 つである First Input Delay を近似するための主なラボ指標です。

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

パフォーマンス パネルの録画の下部にある合計ブロック時間の情報。

Chromium のバグ: #1054381

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

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

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

レイアウト変更の詳細。

コンソールでの約束の用語の正確性の向上

Promise をロギングするときに、Console は Promise の状態を resolved と誤って記述していました。

古い「解決済み」の用語を使用したコンソールの例。

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

新しい「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 キーを押しながら色の値をクリックしてスタイルペインで色の表現を切り替えたりすると、スペース区切りの引数の構文が表示されます。

スタイルペインでスペース区切りの引数を使用する。

また、[Computed] ペインと [Inspect Mode] ツールチップにも構文が表示されます。

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

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

Chromium のバグ: #1072952

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

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

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

関連資料:

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

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

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

[マニフェスト] ペイン内のアプリ ショートカット。

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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