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

DevTools の新機能（Chrome 87）

Jecelyn Yeen

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

DevTools での CSS グリッドデバッグのサポートが向上しました。

CSS グリッドのデバッグ

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

新しい [Layout] ペインには [Grid] セクションがあり、グリッドを表示するためのいくつかのオプションから選択できます。

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

Chromium の問題: 1047356

新しい [WebAuthn] タブ

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

[その他のオプション] > [その他のツール] > [WebAuthn] を選択して [WebAuthn] タブを開きます。

[WebAuthn] タブ

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

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

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

Chromium の問題: 1034663

上部パネルと下部パネルの間でツールを移動します

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

たとえば、[Elements] パネルと [Sources] パネルを一度に表示する場合は、[Sources] パネルを右クリックし、[Move to below] を選択して下に移動します。

一番下に移動

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

一番上に移動

Chromium の問題: 1075732

[要素] パネルの更新

[Styles] ペインで、[Computed] サイドバーペインを切り替えられるようになりました。

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

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

Chromium の問題: 1073899

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

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

この新しいグループ化機能を使用すると、[Computed] ペインを（スクロールせずに）簡単に移動し、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 イベント

[Network] パネルの新しい `resource-type` フィルタと `url` フィルタ

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

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

リソースタイプフィルタ

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

Chromium に関する問題: 1121141、1104188

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

COEP と COOP `reporting to` エンドポイントを表示する

[セキュリティと分離] セクションで、Cross-Origin Embedder Policy（COEP）と Cross-Origin Opener Policy（COOP）reporting to エンドポイントを表示できるようになりました。

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

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

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

Chromium の問題: 1051466

COEP と CoOP の `report-only` モードを表示する

DevTools に、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 に関するその他のことについて話し合うには、次のオプションを使用します。

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