DevTools の新機能（Chrome 87）

Jecelyn Yeen

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

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

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

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

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

Chromium の問題: 1047356

新しい WebAuthn タブ

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

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

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

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

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

Chromium の問題: 1034663

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

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

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

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

Chromium の問題: 1075732

[要素] パネルの更新

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

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

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

Chromium の問題: 1073899

[計算済み] ペインでの 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() イベントがマークされるようになりました。

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

[ネットワーク] パネルで新しい 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 の more_vert その他のオプション > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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