このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 84）

Kayce Basques

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

ドロワーに新たに追加された [Issues] タブは、コンソールの通知疲れや煩雑さを軽減することを目的としています。現在、コンソールは、ウェブサイトのデベロッパー、ライブラリ、フレームワーク、Chrome 自体がメッセージ、警告、エラーを記録するための一元的な場所です。[問題] タブには、ブラウザからの警告が体系的かつ集約され、実用的な形で表示されるほか、DevTools 内の影響を受けるリソースへのリンクや、問題の解決方法に関するガイダンスも表示されます。今後、Chrome の警告が Console ではなく [問題] タブに表示されるようになるため、コンソールが見やすくなります。

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

[問題] タブ。

Chromium のバグ: #1068116

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

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

Chromium のバグ: #1040025

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

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

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

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

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

Chromium のバグ: #1054381

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

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

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

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

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

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

従来の「解決済み」の用語を使ったコンソールの例。

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

新しい「フルフィルメント」という用語を使用したコンソールの例。

V8 のバグ: #6751

スタイルペインの更新

`revert` キーワードのサポート

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

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

Chromium のバグ: #1075437

画像プレビュー

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

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

Chromium のバグ: #1040019

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

CSS カラーモジュールレベル 4 では、rgb() などのカラー関数でスペース区切りの引数をサポートするよう規定しています。たとえば、rgb(0, 0, 0) は rgb(0 0 0) と同じです。

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

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

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

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

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

Chromium のバグ: #1072952

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

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

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

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

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

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

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

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。