DevTools の新機能（Chrome 90）

Jecelyn Yeen

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

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

CSS Flexbox デバッグツール

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

[Styles] ペインで、display: flex の横にある新しいアイコンをクリックします。または、 display: inline-flex: Flexbox エディタを開きます。Flexbox エディタでは、ファイルを簡単に flexbox プロパティに 割り当てられています実際に試してみましょう。

また、[Layout] ペインには [Flexbox] セクションがあり、すべての Flexbox 要素を できます。各要素のオーバーレイを切り替えることができます。

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

Chromium の問題: 1166710、1175699

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

新しい Core Web Vitals オーバーレイを使用すると、ページのパフォーマンスを可視化して測定しやすくなります。

Core Web Vitals は、Google が開発した Google の取り組みで、 ウェブで優れたユーザー エクスペリエンスを提供するために不可欠です。

コマンド メニューを開いて [表示を表示] コマンドを実行してから、Core Web を有効にします」 [Vitals] チェックボックスをオンにします。

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

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

Core Web Vitals のオーバーレイ

Chromium の問題: 1152089

[問題] タブの更新

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

コンソールのステータスバーに [Issue count] ボタンを新たに追加し、 警告が表示されます。これは、コンソールの問題メッセージに代わるものです。

コンソールのステータスバーに表示された問題数

Chromium の問題: 1140516

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

[問題] タブで、信頼できるウェブ アクティビティの問題が報告されるようになりました。これによりデベロッパーは 信頼できるウェブ アクティビティの問題を把握、修正し、 説明します。

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

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

Chromium の問題: 1147479

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

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

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

Chromium の問題: 1178530

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

DevTools の現在のブラウジング コンテキストで利用可能なすべてのトラスト トークンが、新しいトラスト [アプリケーション] パネルのトークン] ペイン。

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

[New Trust Tokens] ペイン

Chromium の問題: 1126824

CSS の色域メディア機能をエミュレートする

CSS の色域メディア機能をエミュレートする

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

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

Chromium の問題: 1073887

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

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

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

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

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

また、[Manifest] ペインで、PWA のスクリーンショットに 要件に一致しますPWA の [スクリーンショット] プロパティとその要件の詳細 見てみましょう。

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

Chromium の問題: 1146450、1169689、965802

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

[Network] パネルの新しい Remote Address Space 列を使用して、ネットワーク IP アドレス空間を確認します。 自動的に作成されます。

新しい「リモート アドレス空間」列

Chromium の問題: 1128885

パフォーマンスの改善

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

DevTools でスタック トレースを収集し、後で使用するためにコンソール メッセージまたは非同期タスクに添付 デベロッパーが消費するリソースの量を記録します。この収集は同期的に発生する必要があるため、 ブラウザ エンジンでスタック トレースの収集が遅くなると、 DevTools が開きます。スタック トレース収集のオーバーヘッドを大幅に削減できました。

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

Chromium の問題: 1069425、1077657

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

フレームの詳細ビューに、 権限に関するポリシー。

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

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

Chromium の問題: 1158827

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

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

SameParty 列

Chromium の問題: 1161427

非標準の fn.displayName サポートのサポートが終了しました

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

displayName の使用例

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

fn.displayName は、標準の fn.name に置き換えます。これは、 Object.defineProperty など）を使用して、非標準の fn.displayName プロパティを置き換えます。

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

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

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

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

Chromium の問題: 1155460

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

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

現在のユーザー補助機能ペインでは、そのノードが一部しか表示されず、 ルートノードから検査対象ノードに祖先チェーンを直結します。新しいユーザー補助ツリービューは より探索しやすく便利で デベロッパーにとっても使いやすいものにします 使用できます。

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

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

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

Chromium の問題: 887173

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

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

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

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

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

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。