このページは 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] セクション

Chromium の問題: 1166710、1175699

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

新しい 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

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

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

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

[問題] タブでの信頼できるウェブアクティビティの問題

Chromium の問題: 1147479

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

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

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

Chromium の問題: 1178530

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

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

Trust Token は、パッシブなトラッキングを行うことなく、不正行為を阻止し、bot と人間を区別するための新しい API です。Trust Token の利用を開始する方法を確認する。

[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 のインストール可否に関する警告

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

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

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

PWA のスクリーンショットに関する警告

Chromium の問題: 1146450、1169689、965802

[ネットワーク] パネルの新しい [`Remote Address Space`] 列

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

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

Chromium の問題: 1128885

パフォーマンスの改善

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

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

実装については、エンジニアリングのブログ投稿で詳しく解説しますので、どうぞお見逃しなく。

Chromium の問題: 1069425、1077657

[フレームの詳細] ビューで許可または許可されていない機能を表示する

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

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

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

Chromium の問題: 1158827

[Cookies] ペインの新しい `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 に置き換えます。これは、非標準の fn.displayName プロパティを置き換えるために、ECMAScript 2015 で（Object.defineProperty を介して）構成可能になりました。

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

名前の使用例

Chromium の問題: 1177685

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

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

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

Chromium の問題: 1056922

試験運用版の機能

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

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

低コントラストテキストは、ウェブ上でユーザー補助機能として自動検出されることが多い問題です。これらの問題を [問題] タブに表示すると、デベロッパーが問題を簡単に見つけられるようになります。

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

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

Chromium の問題: 1155460

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

改善された新しい完全なユーザー補助機能ツリービューを表示するよう切り替えられるようになりました。

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

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

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

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

Chromium の問題: 887173

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

デフォルトの開発ブラウザとして 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 動画にコメントを残してください。