DevTools の新機能（Chrome 91）

[パフォーマンス] パネルにウェブバイタルの情報がポップアップ表示される

[パフォーマンス] パネルでウェブに関する主な指標のマーカーにカーソルを合わせると、指標の内容（パフォーマンスが良好か、改善が必要か、不良か）を確認できます。

Chromium の問題: 1147872

CSS の scroll-snap を可視化する

[要素] パネルで scroll-snap バッジを切り替えて、CSS スクロール スナップの配置を検査できるようになりました。

ページの HTML 要素（このデモページなど）に scroll-snap-type が適用されている場合、[要素] パネルでその要素の横に scroll-snap バッジが表示されます。バッジをクリックすると、ページ上のスクロール スナップ オーバーレイの表示を切り替えることができます。

上の例では、スナップ エッジにドットマークが表示されています。スクロール ポートは実線で囲まれ、スナップ アイテムは破線で囲まれています。スクロール パディングは緑色で塗りつぶされ、スクロール マージンはオレンジ色で塗りつぶされます。

Chromium の問題: 862450

新しい Memory Inspector

新しいメモリ インスペクタを使用して、JavaScript の ArrayBuffer と Wasm メモリを検査します。

こちらのデモページを開きます。[ソース] パネルで demo-js.js ファイルを開き、18 行目にブレークポイントを設定します。

ページを更新すると、右側の デバッガ ペインで [スコープ] セクションを開きます。バッファ値の横に新しいアイコンが表示されます。クリックすると、メモリ インスペクタが表示されます。

この新しいメモリ インスペクタを使用した JavaScript の ArrayBuffer と WebAssembly.Memory の検査について詳しくは、ドキュメントをご覧ください。

Chromium の問題: 1166577

[要素] パネルの新しいバッジ設定ペイン

[要素] パネルの [バッジの設定] で、バッジを選択的に有効または無効にできるようになりました。この機能を使用すると、ウェブページを検査する際に重要なバッジをカスタマイズして、それらに注目することができます。

[要素] パネルで、任意の要素を右クリックします。コンテキスト メニューから [バッジの設定] を選択すると、バッジの設定ペインが上部に表示されます。チェックボックスをオンまたはオフにして、バッジの表示/非表示を切り替えます。

Chromium の問題: 1066772

アスペクト比情報を含む画像プレビューの強化

[要素] パネルの画像プレビューに、レンダリングされたサイズ、レンダリングされたアスペクト比、固有のサイズ、固有のアスペクト比、ファイルサイズなど、画像に関する詳細情報が表示されるようになりました。

この情報は、画像をより深く理解し、必要に応じて最適化を適用するのに役立ちます。

画像のアスペクト比の情報は、画像をクリックしてプレビューするときに [ネットワーク] パネルでも確認できます。

Chromium の問題: 1149832、1170656

Content-Encoding を構成するオプションを含む [新しいネットワーク条件] ボタン

[ネットワーク] パネルに新しいネットワーク条件ボタンが追加されました。クリックして [ネットワーク状態] タブを開きます。

[ネットワーク条件] タブに新しい [Accepted Content-Encodings] オプションが追加されました。gzip、brotli、その他の将来の Content-Encoding をサポートしていないブラウザで、サーバー レスポンスが正しくエンコードされているかどうかをテストするように構成します。

Chromium の問題: 1162042

スタイル パネルの機能強化

[スタイル] ペインで計算された値を表示する新しいショートカット

[スタイル] ペインで CSS プロパティを右クリックし、[計算された値を表示] を選択して、計算された CSS 値を表示できるようになりました。

Chromium の問題: 1076198

accent-color キーワードのサポート

[スタイル] ペインのオートコンプリート UI で accent-color CSS キーワードが検出されるようになりました。これにより、ウェブ デベロッパーは、要素によって生成される UI コントロール（チェックボックス、ラジオボタンなど）のアクセント カラーを指定できます。

accent-color CSS プロパティは現在試験運用版です。テストするには、chrome://flags/#enable-experimental-web-platform-features を有効にしてください。

Chromium の問題: 1092093

色とアイコンで問題の種類を分類する

[問題] タブで、問題がページエラー、今後の破壊的変更、改善案に分類され、重大度をより適切に示せるようになりました。[コンソール] の [問題数] ボタンをクリックすると、[問題] タブを開くことができます。

• ページエラー（赤）。正しい CORS ヘッダーが設定されていないなど、ページ機能に直ちに影響する問題。
• 今後予定されている互換性を破る変更（黄色）。ウェブ プラットフォームの互換性のない変更が予定されており、ページの機能が失われる可能性があることを知らせる問題（たとえば、CORS RFC 1918 の変更が予定されていることを知らせる警告）。
• 改善の可能性（青色）。ページを改善できる可能性があるが、現時点ではページの基本的な機能（アクセシビリティの問題など）を損なっていない

Chromium の問題: 1183241

トラスト トークンを削除する

[アプリケーション] パネルの [トラスト トークン] ペインに新しい削除ボタンが追加され、トラスト トークンを削除できるようになりました。

Trust Token は、パッシブ トラッキングを行わずに不正行為を防いで bot と人間を見分けるための新しい API です。トラスト トークンの使用を開始する方法を確認する。

Chromium の問題: 1126824

フレームの詳細ビューでブロックされた機能の詳細を表示する

フレームの詳細ビューの [権限ポリシー] セクションで、ブロックされた機能の詳細を確認できるようになりました。

こちらのデモページを開きます。[Application] パネルに移動し、フレームを選択します。[Permissions Policy] セクションで、[Disabled Features] プロパティまでスクロールします。[詳細を表示] をクリックすると、機能がブロックされている理由の詳細が表示されます。各ポリシーの横にあるアイコンをクリックすると、機能をブロックした iframe またはネットワーク リクエストに移動します。

権限に関するポリシーは、ウェブサイトが独自のフレームまたは埋め込んだ iframe でブラウザ機能の使用を許可またはブロックできるようにするウェブ プラットフォーム API です。

Chromium の問題: 1158827

テスト設定でテストをフィルタする

新しいテストフィルタを使用して、テストをすばやく見つけられるようになりました。たとえば、[設定] > [テスト] に移動し、[フィルタ] テキスト ボックスに「コントラスト」と入力すると、「コントラスト」という単語を含むすべてのテストがフィルタされます。

[キャッシュ ストレージ] ペインの新しい Vary Header 列

[キャッシュ ストレージ] ペインの新しい Vary Header 列を使用して、Vary HTTP レスポンス ヘッダーを表示します。

Chromium の問題: 1186049

[ソース] パネルの改善

新しい JavaScript 機能のサポート

DevTools で、新しい プライベート ブランド チェック JavaScript 言語機能（#foo in obj）がサポートされるようになりました。

このプライベート ブランド チェック機能は、in 演算子を拡張して、任意のオブジェクトに対するプライベート クラス フィールドのテストをサポートします。

[コンソール] パネルと [ソース] パネルでお試しください。プライベート フィールドは、[デバッガ] ペインの [スコープ] セクションでも検査できます。

Chromium の問題: 11374

ブレークポイント デバッグのサポートを強化

複数のスクリプトでブレークポイントが正しく設定されるようになりました。最新の JavaScript バンドラ（Webpack、Rollup など）はコード分割機能をサポートしています。1 つの共有コンポーネントを複数のルート（コード分割）に含めることができるシナリオがあります。

以前は、DevTools でブレークポイントを設定できるのは 1 つの未加工の場所のみでした。今回の改善により、DevTools は関連するすべての場所でブレークポイントを正しく設定できるようになりました。

Chromium の問題: 1142705、979000、1180794

[] 表記でマウスオーバー プレビューをサポート

DevTools の [Sources] パネルで、[] 表記を使用する JavaScript メンバー式でのホバー プレビューがサポートされるようになりました。

Chromium の問題: 1178305

HTML ファイルのアウトラインの改善

DevTools で HTML ファイルのアウトラインのサポートが強化されました。[Sources] パネルで、HTML ファイルを開きます。コードのアウトラインは、Mac では Cmd+Shift+O キー、Windows では Ctrl+Shift+O キーで切り替えることができます。

次の例では、DevTools でアウトライン内のすべての関数が正しく一覧表示されるようになりました。以前は、DevTools には一部の関数しか表示されませんでした。

Chromium の問題: 761019、1191465

Wasm デバッグ用の適切なエラー スタック トレース

DevTools でインライン関数呼び出しが解決され、Wasm デバッグ用の適切なエラー スタック トレースが表示されるようになりました。

以前は、DevTools のエラー スタック トレースには一般的な Wasm 参照のみが表示されていました。

左側の古いバージョンの Chrome では、エラー スタック トレースにソースの場所（dsquare など）が表示されませんが、右側の新しいバージョンでは表示されます。

Chromium の問題: 1189161

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

• フィードバックや機能リクエストは、crbug.com からお送りください。
• DevTools の more_vert その他のオプション > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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