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

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 機能について詳しくは、Google のドキュメントをご覧ください。

Chromium の問題: 1034663

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

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

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

一番下に移動

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

一番上に移動

Chromium の問題: 1075732

[要素] パネルの更新

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

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

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

Chromium の問題: 1073899

Computed ペインでの 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 ライブラリのサイズが大きいと、パフォーマンスが低下する可能性があります。この監査では、一般的な大規模な JavaScript ライブラリ（moment.js など）に代わる低コストのライブラリが提案されます。

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` モードを表示する

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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。