DevTools の新機能（Chrome 84）

Kayce Basques

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

ドロワーの新しい [Issues]（問題）タブは、 コンソール。現在、コンソールは、ウェブサイトのデベロッパー、ライブラリ、 フレームワーク、Chrome 自体を使用してメッセージ、警告、エラーを記録します。[Issues] タブには、 ブラウザから送信された警告を、体系的かつ集約された形で実行可能な形で提示し、影響を受けたユーザーのリストにリンクします。 リソースを確認し、問題の修正方法に関するガイダンスを提供します。時間が経つと、増えていきます Chrome の警告のうち、コンソールではなく [問題] タブに表示されるようになるため、 コンソールがすっきりします

手順については、Chrome DevTools の [Issues] タブで問題を特定して修正するをご覧ください。

[問題] タブ。

Chromium のバグ: #1068116

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

検査モードのツールチップに、要素にアクセス可能な名前とロールがあるかどうかが表示されるようになりました また、キーボードでフォーカス可能です。

ユーザー補助情報が表示された検査モードのツールチップ。

Chromium のバグ: #1040025

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

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

負荷のパフォーマンスを記録すると、[Performance] パネルに [Total Blocking Time] が表示されるようになりました。 （TBT）情報をフッターに追加します。TBT は読み込み時間のパフォーマンス指標で、 ページが使用可能になるまでの時間です。基本的には、ページが使用可能と表示されるまでの時間を測定します。 （コンテンツが画面にレンダリングされているため）ですが、JavaScript では実際には使用不可です。 がメインスレッドをブロックしているため、ページはユーザー入力に応答できません。TBT がメインのラボです。 指標を使用して、First Input Delay の概算を行うことができます。First Input Delay は、Google の新しい Core Web Vitals の一つです。

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

パフォーマンス パネルの録画のフッターに表示される合計ブロック時間の情報。

Chromium のバグ: #1054381

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

パフォーマンス パネルの新しい [エクスペリエンス] セクションで、レイアウト シフトを検出できるようになりました。 Cumulative Layout Shift（CLS）は、望ましくない視覚的不安定性を定量化し、 は、Google の新しい Core Web Vitals の 1 つです。

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

レイアウト シフトの詳細。

コンソールでの Promise の用語をより正確に

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

以前の「resolved」コマンドを使用したコンソールの例用語です。

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

新しい「fulfilled」を使用した Console の例用語です。

V8 のバグ: #6751

スタイルペインの更新

revert キーワードのサポート

[スタイル] ペインの予測入力 UI で、CSS キーワード revert が検出されるようになりました。これにより、 プロパティの値が、 指定できます。

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

Chromium のバグ: #1075437

画像プレビュー

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

背景画像の値にカーソルを合わせます。

Chromium のバグ: #1040019

カラー選択ツールでスペース区切りの機能的な色表記が使用されるようになりました

CSS カラー モジュール レベル 4 では、rgb() などのカラー関数でサポートする必要があることが規定されています。 スペースで区切られた引数を使用します。たとえば、rgb(0, 0, 0) は rgb(0 0 0) と同じです。

カラー選択ツールで色を選択するか、 Shift キーを押しながら色の値をクリックすると、 渡します。

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

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

color() などの今後の CSS 機能は 非推奨のカンマ区切り引数構文を参照してください。

スペース区切りの引数の構文は、以前からほとんどのブラウザでサポートされていました。詳細については、 スペース区切りの機能的な色表記は？

Chromium のバグ: #1072952

[要素] パネルの [プロパティ] ペインのサポート終了

[要素] パネルの [プロパティ] ペインのサポートが終了しました。console.dir($0) を 代わりにコンソールを使用してください。

非推奨になった [Properties] ペイン

関連資料:

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

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

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

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

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。