DevTools の新機能（Chrome 90）

新しい CSS flexbox デバッグツール

DevTools に専用の CSS フレックスボックス デバッグツールが追加されました。

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

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

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

Chromium の問題: 1166710、1175699

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

新しい Core Web Vitals オーバーレイで、ページのパフォーマンスをより視覚的に測定できるようになりました。

ウェブに関する主な指標は、ウェブで優れたユーザー エクスペリエンスを実現する際に重要となる品質シグナルについて、統一的な目安を提供するための Google の取り組みです。

コマンド メニューを開き、[レンダリングを表示] コマンドを実行して、[コア ウェブ バイタル] チェックボックスをオンにします。

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

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

Chromium の問題: 1152089

[問題] タブの更新

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

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

Chromium の問題: 1140516

信頼できるウェブ アクティビティに関する問題を報告する

[問題] タブで、Trusted Web Activity の問題が報告されるようになりました。これにより、デベロッパーはサイトの Trusted Web Activity の問題を理解して修正し、アプリケーションの品質を向上させることができます。

Trusted Web Activity を開きます。次に、[コンソール] ステータスバーの [問題の数] ボタンをクリックして [問題] タブを開き、問題を表示します。信頼できるウェブ アクティビティの作成とデプロイについて詳しくは、Andre によるこちらの講演をご覧ください。

Chromium の問題: 1147479

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

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

Chromium の問題: 1178530

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

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

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

Chromium の問題: 1126824

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

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

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

Chromium の問題: 1073887

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

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

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

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

Chromium の問題: 1146450、1169689、965802

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

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

Chromium の問題: 1128885

パフォーマンスの改善

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

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

実装について説明するエンジニアリング ブログ投稿を近日公開予定です。

Chromium の問題: 1069425、1077657

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

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

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

Chromium の問題: 1158827

[Cookie] ペインの新しい SameParty 列

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

Chromium の問題: 1161427

非標準の fn.displayName サポートを非推奨に

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

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

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

fn.displayName のサポートは信頼性が低く、ブラウザ エンジン間で一貫性がありません。これにより、スタック トレースの収集が遅くなります。これは、デベロッパーが fn.displayName を実際に使用するかどうかにかかわらず、常に負担するコストです。

Chromium の問題: 1177685

設定メニューの Don't show Chrome Data Saver warning のサポート終了

Chrome データセーバーが非推奨になったため、Don't show Chrome Data Saver warning 設定が削除されました。

Chromium の問題: 1056922

試験運用版の機能

[問題] タブでの低コントラストの問題の自動報告

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

低コントラストのテキストは、ウェブ上で自動的に検出できる最も一般的なアクセシビリティの問題です。[問題] タブにこれらの問題を表示することで、デベロッパーはこれらの問題を簡単に見つけることができます。

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

Chromium の問題: 1155460

[要素] パネルのアクセシビリティ ツリーの全ページ表示

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

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

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

これは初期段階のテストです。今後、この機能の改善と拡張を予定しています。

Chromium の問題: 887173

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

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

DevTools の新機能

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