DevTools の新機能(Chrome 84)

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

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

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

[問題] タブ。

Chromium のバグ: #1068116

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

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

ユーザー補助情報を含む [Inspect Mode] ツールチップ。

Chromium のバグ: #1040025

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

フッターに Total Blocking Time(TBT)情報を表示

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

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

パフォーマンス パネルの録音のフッターに表示される Total Blocking Time の情報。

Chromium のバグ: #1054381

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

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

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

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

コンソールでの Promise の用語の精度が向上

Promise をロギングする場合、コンソールは Promise の状態を resolved と誤って記述するために使用しました。

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

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

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

V8 のバグ: #6751

スタイル ペインの更新

revert キーワードのサポート

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

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

Chromium のバグ: #1075437

画像プレビュー

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

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

Chromium のバグ: #1040019

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

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

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

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

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

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

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

Chromium のバグ: #1072952

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

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

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

関連資料:

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

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

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

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

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

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

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

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

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

DevTools の新機能

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 はキャンセルされました

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59