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

DevTools の新機能（Chrome 90）

Jecelyn Yeen

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

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

CSS Flexbox デバッグツール

ページ上の 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）: 読み込みパフォーマンスを測定します。優れたユーザーエクスペリエンスを提供するため、LCP はページの読み込みが最初に開始されてから 2.5 秒以内に発生する必要があります。
First Input Delay（FID）: インタラクティビティを測定します。優れたユーザーエクスペリエンスを提供するには、ページの FID を 100 ミリ秒未満にする必要があります。
Cumulative Layout Shift（CLS）: 視覚的な安定性を測定します。優れたユーザーエクスペリエンスを提供するには、ページの CLS を 0.1 未満に維持する必要があります。

Core Web Vitals オーバーレイ

Chromium の問題: 1152089

[問題] タブの更新

問題数をコンソールのステータスバーに移動

コンソールのステータスバーに新しい問題カウントボタンが追加され、問題の警告が見やすくなりました。これにより、コンソールの問題メッセージが置き換えられます。

コンソールステータスバーの問題数

Chromium の問題: 1140516

Trusted Web Activity の問題を報告する

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

Trusted Web Activity を開きます。次に、[Console] ステータスバーの [Issues count] ボタンをクリックして [Issues] タブを開き、問題を表示します。Trusted Web Activity を作成してデプロイする方法については、Andre の講演をご覧ください。

[問題] タブの Trusted Web Activity に関する問題

Chromium の問題: 1147479

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

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

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

Chromium の問題: 1178530

[Application] パネルの [New Trust Tokens] ペイン

DevTools で、[Application] パネルの下の新しい [Trust Tokens] ペインに、現在のブラウジングコンテキストで使用可能なすべてのトラストトークンが表示されます。

Trust Token は、不正行為に対処し、パッシブトラッキングなしで bot と実際の人間を区別するための新しい API です。トラストトークンスタートガイドをご覧ください。

[New Trust Tokens] ペイン

Chromium の問題: 1126824

CSS の色域メディア対象物をエミュレートする

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

コマンドメニューを開き、[Show Rendering] コマンドを実行して、[Emulate CSS media feature color-gamut] プルダウンを設定します。

Chromium の問題: 1073887

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

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

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

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

PWA の説明の切り捨てに関する警告

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

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

Chromium の問題: 1146450、1169689、965802

[Network] パネルの新しい `Remote Address Space` 列

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

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

Chromium の問題: 1128885

パフォーマンスの改善

DevTools を開いたときのページ読み込みのパフォーマンスが向上しました。極端な例では、パフォーマンスが 10 倍向上しました。

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

実装の詳細については、エンジニアリングに関するブログ投稿をご覧ください。

Chromium に関する問題: 1069425、1077657

フレームの詳細ビューに許可/禁止される機能を表示する

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

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

権限ポリシーに基づいて許可または禁止される機能

Chromium の問題: 1158827

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

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

SameParty 列

Chromium の問題: 1161427

非標準の `fn.displayName` サポートを非推奨にしました

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

displayName の使用例

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

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

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

name の使用例

Chromium の問題: 1177685

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

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

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

Chromium の問題: 1056922

試験運用版の機能

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

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

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

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

低コントラストの問題の自動報告

Chromium の問題: 1155460

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

改善された新しいフルアクセシビリティツリービューに切り替えることができるようになりました。

現在のユーザー補助機能ペインには、ルートノードから検査対象ノードへの直接の祖先チェーンのみが表示されます。新しいユーザー補助ツリービューは、この状況を改善することを目的としています。これにより、ユーザー補助ツリーがデベロッパーにとってより探索しやすく、便利で、使いやすくなります。

試験運用版を有効にすると、[要素] パネルに新しいボタンが表示され、クリックすると既存の DOM ツリーと完全なユーザー補助ツリーが切り替わります。

なお、この試験運用は初期段階の試験運用です。今後、機能の改善と拡張を予定しています。

フルアクセシビリティツリービュー

Chromium の問題: 887173

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

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

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

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

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