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 つのツールを同時に表示できます

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

一番下に移動

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

一番上に移動

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 ラベルが表示されるようになりました。

レポート専用ラベル

情報漏洩を防止し、Google Cloud で 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 動画にコメントを残してください。

DevTools の新機能

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