DevTools の新機能（Chrome 87）

Jecelyn Yeen

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

DevTools で CSS グリッドのデバッグ機能が強化されました。

CSS グリッドのデバッグ

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

新しい [レイアウト] ペインには、グリッドを表示するためのさまざまなオプションを提供する [グリッド] セクションがあります。

詳しくは、ドキュメントをご覧ください。

Chromium の問題: 1047356

新しい [WebAuthn] タブ

新しい [WebAuthn] タブで、認証システムをエミュレートし、Web Authentication API をデバッグできるようになりました。

[その他アイコン] > [その他のツール] > [WebAuthn] を選択して、[WebAuthn] タブを開きます。

[WebAuthn] タブ

新しい [WebAuthn] タブが導入される前は、Chrome でネイティブの WebAuthn デバッグはサポートされていませんでした。デベロッパーは、Web Authentication API でウェブ アプリケーションをテストするために物理的な認証システムが必要でした。

新しい [WebAuthn] タブにより、ウェブ デベロッパーは物理的な認証システムを使用せずに、これらの認証システムをエミュレートし、機能をカスタマイズして状態を検査できるようになりました。これにより、デバッグがはるかに簡単になります。

WebAuthn 機能の詳細については、ドキュメントをご覧ください。

Chromium の問題: 1034663

上部パネルと下部パネル間でツールを移動する

DevTools で、DevTools 内のツールを上部パネルと下部パネルの間で移動できるようになりました。これにより、任意の 2 つのツールを同時に表示できます。

たとえば、[要素] パネルと [ソース] パネルを同時に表示する場合は、[ソース] パネルを右クリックして [一番下に移動] を選択して一番下に移動します。

一番下に移動

同様に、タブを右クリックして [一番上に移動] を選択すると、下部のタブを上部に移動できます。

一番上に移動

Chromium の問題: 1075732

[要素] パネルの更新

スタイルペインで [計算済み] サイドバー ペインを表示する

スタイルペインで [計算サイドバー] ペインを切り替えられるようになりました。

[スタイル] ペインの [計算済みサイドバー] ペインは、デフォルトで閉じられています。ボタンをクリックして切り替えます。

計算済みサイドバー ペイン

Chromium の問題: 1073899

[計算済み] ペインで CSS プロパティをグループ化する

[計算済み] ペインで CSS プロパティをカテゴリ別にグループ化できるようになりました。

この新しいグループ化機能により、[計算済み] ペイン内を簡単に移動（スクロールの回数を減らす）でき、CSS 検査で関連するプロパティのセットに選択的にフォーカスできるようになります。

[要素] パネルで要素を選択します。[グループ] チェックボックスを切り替えて、CSS プロパティをグループ化またはグループ化解除します。

CSS プロパティのグループ化

Chromium の問題: 1096230、1084673、1106251

Lighthouse パネルの Lighthouse 6.4

[Lighthouse] パネルで Lighthouse 6.4 が実行されるようになりました。変更点の一覧については、リリースノートをご覧ください。

灯台

Lighthouse 6.4 の新規監査:

  • フォントをプリロードする。font-display: optional を使用するすべてのフォントがプリロードされているかどうかを検証します。
  • 有効なソースマップ。ページにサイズの大きいファーストパーティの JavaScript の有効なソースマップがあるかどうかを監査します。
  • [試験運用版] 大規模な JavaScript ライブラリ。JavaScript ライブラリのサイズが大きいと、パフォーマンスが低下することがあります。この監査では、moment.js などの一般的な大規模な JavaScript ライブラリに代わる、より安価な代替手段を提案します。

Chromium の問題: 772558

[タイミング] セクションの performance.mark() イベント

パフォーマンス レコーディングの [タイミング] セクションに、performance.mark() イベントがマークされるようになりました。

Performance.mark イベント

[ネットワーク] パネルに新しい resource-type フィルタと url フィルタ

[ネットワーク] パネルで新しい resource-type キーワードと url キーワードを使用して、ネットワーク リクエストをフィルタリングします。

たとえば、resource-type:image を使用して、画像であるネットワーク リクエストにフォーカスします。

リソースタイプ フィルタ

resource-type や url などの特別なキーワードについては、プロパティでリクエストをフィルタするをご覧ください。

Chromium の問題: 1121141、1104188

フレームの詳細ビューの更新

COEP と COOP の reporting to エンドポイントを表示

クロスオリジン エンベディング ポリシー（COEP）とクロスオリジン オープナー ポリシー（COOP）reporting to エンドポイントを [セキュリティと分離] セクションで確認できるようになりました。

Reporting API は、新しい HTTP ヘッダー Report-To を定義します。これにより、ウェブ デベロッパーは、ブラウザが警告とエラーを送信するサーバー エンドポイントを指定できます。

エンドポイントへのレポート

COEP と COOP を有効にしてウェブサイトを「クロスオリジン分離」する方法について詳しくは、こちらの記事をご覧ください。

Chromium の問題: 1051466

COEP と COOP の report-only モードを表示

report-only モードに設定された COEP と COOP に report-only ラベルが表示されるようになりました。

報告専用ラベル

情報漏洩を防ぎ、ウェブサイトで COOP と COEP を有効にする方法については、こちらの動画をご覧ください。

Chromium の問題: 1051466

その他のツール メニューの Settings のサポート終了

[その他のツール] メニューの Settings はサポートを終了しました。代わりに、メインパネルから [設定] を開きます。

メインパネルの設定

Chromium の問題: 1121312

試験運用版の機能

[CSS の概要] パネルで色のコントラストに関する問題を表示して修正する

[CSS の概要] パネルに、ページ上の色のコントラストの低いテキストのリストが表示されるようになりました。

この例では、デモページに低コントラストの色の問題があります。問題をクリックすると、問題のある要素のリストが表示されます。

低コントラストの色に関する問題

リストの要素をクリックすると、[要素] パネルにその要素が表示されます。DevTools では、低コントラストのテキストを修正するために自動色の候補が提示されます。

Chromium の問題: 1120316

DevTools でキーボード ショートカットをカスタマイズする

DevTools で、お気に入りのコマンドのキーボード ショートカットをカスタマイズできるようになりました。

[設定] > [ショートカット] に移動し、コマンドにカーソルを合わせて [編集] ボタン（ペンアイコン）をクリックして、キーボード ショートカットをカスタマイズします。

キーボード ショートカットをカスタマイズする

すべてのショートカットをリセットするには、[デフォルトのショートカットに戻す] をクリックします。

Chromium の問題: 174309

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

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

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

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

DevTools の新機能

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