DevTools の新機能（Chrome 90）

Jecelyn Yeen

新しい CSS フレックス ボックスのデバッグツール

DevTools に専用の CSS Flexbox デバッグツールが追加されました。

CSS フレックス ボックスのデバッグツール

ページの HTML 要素に display: flex または display: inline-flex が適用されている場合、[要素] パネルにその要素の横に flex バッジが表示されます。バッジをクリックすると、ページ上の Flex オーバーレイの表示を切り替えることができます。

[スタイル] ペインで、display: flex または display: inline-flex の横にある新しいアイコンをクリックして、Flexbox エディタを開きます。Flexbox エディタを使用すると、Flexbox プロパティを簡単に編集できます。ぜひお試しください。

また、[レイアウト] ペインには [Flexbox] セクションがあり、ページ上のすべての Flexbox 要素が表示されます。各要素のオーバーレイを切り替えることができます。

[レイアウト] ペインの [Flexbox] セクション

Chromium の問題: 1166710、1175699

新しい Core Web Vitals オーバーレイ

新しい Core Web Vitals のオーバーレイで、ページのパフォーマンスをより効果的に可視化して測定できます。

ウェブに関する主な指標は、ウェブで優れたユーザー エクスペリエンスを実現するために重要と考えられる品質シグナルについて、統一的な目安を提供する Google によるイニシアチブです。

コマンド メニューを開き、[レンダリングを表示] コマンドを実行して、[Core Web Vitals] チェックボックスを有効にします。

現在、オーバーレイには次の情報が表示されます。

  • Largest Contentful Paint（LCP）: 読み込みパフォーマンスを測定します。優れたユーザー エクスペリエンスを提供するには、ページの読み込み開始から 2.5 秒以内に LCP を実現する必要があります。
  • 初回入力遅延（FID）: インタラクティビティを測定します。優れたユーザー エクスペリエンスを提供するには、ページの FID を 100 ミリ秒未満にする必要があります。
  • Cumulative Layout Shift（CLS）: 視覚的安定性を測定します。優れたユーザー エクスペリエンスを提供するには、ページの CLS を 0.1 未満に維持する必要があります。

ウェブに関する主な指標のオーバーレイ

Chromium の問題: 1152089

[問題] タブの更新

問題の数を Console のステータスバーに移動しました

問題の警告の視認性を高めるために、コンソールのステータスバーに新しい問題数ボタンが追加されました。これにより、コンソールの問題メッセージが置き換えられます。

Console のステータスバーの問題数

Chromium の問題: 1140516

Trusted Web Activity に関する問題を報告する

[問題] タブに Trusted Web Activity の問題が表示されるようになりました。これは、デベロッパーがサイトの信頼できるウェブ アクティビティの問題を理解して修正し、アプリケーションの品質を向上させることを目的としています。

Trusted Web Activity を開きます。次に、Console のステータスバーにある [問題数] ボタンをクリックして [問題] タブを開き、問題を表示します。Trusted Web Activity の作成とデプロイ方法について詳しくは、Andre によるこちらのトークをご覧ください。

[問題] タブの Trusted Web Activity の問題

Chromium の問題: 1147479

コンソールで文字列を（有効な）JavaScript 文字列リテラルとしてフォーマットする

Console では、文字列が有効な JavaScript 文字列リテラルとしてフォーマットされるようになりました。以前は、コンソールでは文字列を出力する際に二重引用符がエスケープされませんでした。

文字列を（有効な）JavaScript 文字列リテラルとしてフォーマットする

Chromium の問題: 1178530

[アプリケーション] パネルの新しい [信頼トークン] ペイン

DevTools の新しい [トラスト トークン] ペイン（[アプリケーション] パネルの下）に、現在のブラウジング コンテキストで使用可能なすべてのトラスト トークンが表示されるようになります。

Trust Token は、パッシブ トラッキングを行わずに不正行為を防止し、bot と人間を見分けられるようにする新しい API です。トラスト トークンの使用を開始する方法をご確認ください。

新しい [トラスト トークン] ペイン

Chromium の問題: 1126824

CSS color-gamut メディア機能をエミュレートする

CSS color-gamut メディア機能をエミュレートする

color-gamut メディアクエリを使用すると、ブラウザと出力デバイスでサポートされている色の範囲をテストできます。たとえば、color-gamut: p3 メディアクエリが一致する場合、ユーザーのデバイスは Display-P3 色空間をサポートしています。

コマンド メニューを開き、[レンダリングを表示] コマンドを実行して、[CSS メディア特性 color-gamut をエミュレート] プルダウンを設定します。

Chromium の問題: 1073887

プログレッシブ ウェブアプリのツールの改善

DevTools のコンソールに、プログレッシブ ウェブアプリ（PWA）のインストールに関する詳細な警告メッセージとドキュメントへのリンクが表示されるようになりました。

PWA のインストール可能に関する警告

マニフェストの説明が 324 文字を超えると、[マニフェスト] ペインに警告メッセージが表示されるようになりました。

PWA の説明の省略に関する警告

また、PWA のスクリーンショットが要件を満たしていない場合、[マニフェスト] ペインに警告メッセージが表示されるようになりました。PWA のスクリーンショット プロパティとその要件について詳しくは、こちらをご覧ください。

PWA のスクリーンショットの警告

Chromium の問題: 1146450、1169689、965802

ネットワーク パネルに新しい Remote Address Space 列

ネットワーク パネルの新しい Remote Address Space 列を使用して、各ネットワーク リソースのネットワーク IP アドレス空間を確認します。

新しい [リモート アドレス空間] 列

Chromium の問題: 1128885

パフォーマンスの改善

DevTools を開いた状態でのページ読み込みのパフォーマンスが改善されました。極端なケースでは、パフォーマンスが 10 倍向上しました。

DevTools はスタック トレースを集め、コンソール メッセージまたは非同期タスクに関連付けます。これは、問題が発生した場合にデベロッパーが後で使用できるようにするためです。この収集はブラウザ エンジンで同期的に行われるため、スタック トレース収集が遅いと、DevTools が開いているページの速度が大幅に低下する可能性があります。スタック トレース収集のオーバーヘッドを大幅に削減できました。

実装に関する詳細については、エンジニアリング ブログ投稿で取り上げますので、ご期待ください。

Chromium の問題: 1069425、1077657

フレームの詳細ビューに許可されている機能と許可されていない機能を表示

フレームの詳細ビューに、権限ポリシーによって制御される許可されたブラウザ機能と許可されていないブラウザ機能のリストが表示されるようになりました。

権限に関するポリシーは、ウェブサイトが独自のフレームまたは埋め込まれた iframe でブラウザ機能の使用を許可またはブロックできるようにする、Web Platform API です。

権限ポリシーに基づく許可/禁止機能

Chromium の問題: 1158827

[Cookie] ペインに新しい SameParty 列を追加

[アプリケーション] パネルの [Cookie] ペインに、Cookie の SameParty 属性が表示されるようになりました。SameParty 属性は、同じファースト パーティ セットのオリジンへのリクエストに Cookie を含めるかどうかを示す新しいブール値属性です。

SameParty 列

Chromium の問題: 1161427

非標準の fn.displayName サポートのサポート終了

非標準の fn.displayName のサポートは終了しました。代わりに fn.name を使用してください。

displayName の使用例

Chrome では、error.stack と DevTools スタックトレース内に表示される関数のデバッグ名をデベロッパーが制御できるように、従来から非標準の fn.displayName プロパティをサポートしてきました。上記の例では、以前は [コールスタック] に noLongerSupport が表示されていました。

fn.displayName は、標準以外の fn.displayName プロパティに代わる、ECMAScript 2015 で（Object.defineProperty を介して）構成可能になった標準の fn.name に置き換えます。

fn.displayName のサポートは信頼性が低く、ブラウザ エンジン間で一貫していません。スタックトレース コレクションが遅くなります。これは、デベロッパーが fn.displayName を実際に使用しているかどうかに関係なく、常にデベロッパーが支払う費用です。

名前の使用例

Chromium の問題: 1177685

設定メニューの Don't show Chrome Data Saver warning の非推奨

Chrome データセーバーのサポートが終了したため、Don't show Chrome Data Saver warning 設定が削除されました。

「Chrome データセーバーの警告を表示しない」設定のサポート終了

Chromium の問題: 1056922

試験運用版の機能

[問題] タブでの低コントラストの問題の自動レポート

DevTools に、[問題] タブでコントラストの問題を自動的に報告するための試験運用版のサポートが追加されました。

低コントラストのテキストは、ウェブ上で自動的に検出される最も一般的なユーザー補助に関する問題です。これらの問題を [問題] タブに表示すると、デベロッパーが問題を簡単に見つけやすくなります。

低コントラストの問題があるページを開きます（このデモなど）。次に、Console のステータスバーにある [問題数] ボタンをクリックして [問題] タブを開き、問題を表示します。

低コントラストの問題の自動レポート

Chromium の問題: 1155460

要素パネルの完全なユーザー補助ツリービュー

ページのアクセシビリティ ツリーを切り替えて、新しいアクセシビリティ ツリーを全ページ表示できるようになりました。

現在のユーザー補助ペインでは、ノードが制限付きで表示され、ルートノードから検査対象ノードまでの直接の祖先チェーンのみが表示されます。新しいユーザー補助ツリービューは、この点の改善を目的としており、ユーザー補助ツリーをより探索しやすく、有用で、デベロッパーが使いやすくしています。

テストを有効にすると、[要素] パネルに新しいボタンが表示されます。このボタンをクリックすると、既存の DOM ツリーと完全なユーザー補助ツリーを切り替えることができます。

これは初期段階の試験運用である点にご注意ください。今後、この機能の改善と拡張を予定しています。

アクセシビリティ ツリーの完全なビュー

Chromium の問題: 887173

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

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

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

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

DevTools の新機能

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