DevTools の新機能（Chrome 91）

Jecelyn Yeen

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

[パフォーマンス] パネルのウェブに関する主な指標のマーカーにカーソルを合わせると、パフォーマンスが良好か、改善が必要か、不良かを示すインジケーターが表示されます。

ウェブに関する指標に関する情報のポップアップ

Chromium の問題: 1147872

CSS スクロール スナップを可視化する

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

CSS scroll-snap

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

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

Chromium の問題: 862450

新しい Memory Inspector

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

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

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

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

Memory Inspector

Chromium の問題: 1166577

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

[要素] パネルの [バッジの設定] で、バッジを個別に有効または無効にできるようになりました。この機能を使用すると、ウェブページを検査する際に重要なバッジをカスタマイズして、常に重要なバッジに集中できます。

要素パネルのバッジ設定ペイン

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

Chromium の問題: 1066772

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

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

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

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

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

ネットワーク パネルの画像のアスペクト比情報

Chromium の問題: 1149832、1170656

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

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

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

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 を有効にしてください。

accent-color

Chromium の問題: 1092093

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

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

  • ページエラー（赤）。適切な CORS ヘッダーが設定されていないなど、ページの機能に直ちに影響する問題。
  • 互換性を破る今後の変更（黄色）。ページの機能が失われる可能性のある、ウェブ プラットフォームの互換性のない変更について知らせる問題（CORS RFC 1918 の今後の変更に関する警告など）。
  • 改善の余地（青）。ページの改善の余地はあるものの、現時点ではページの基本的な機能に支障をきたしていない（例: ユーザー補助に関する問題）

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

Chromium の問題: 1183241

Trust トークンを削除する

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

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

Trust トークンを削除する

Chromium の問題: 1126824

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

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

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

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

フレームの詳細ビューでブロックされている機能

Chromium の問題: 1158827

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

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

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

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

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

Vary Header 列

Chromium の問題: 1186049

[ソース] パネルの改善

新しい JavaScript 機能のサポート

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

この限定公開ブランドチェック機能は、in 演算子を拡張して、任意のオブジェクトに対する限定公開クラス フィールドのテストに対応しています。

コンソールの [ソース] パネルで試すことができます。非公開フィールドは、[デバッガ] ペインの [スコープ] セクションでも検査できます。

JavaScript のプライベート ブランドのチェック

Chromium の問題: 11374

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

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

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

Chromium の問題: 1142705、979000、1180794

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

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

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

Chromium の問題: 1178305

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

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

次の例では、DevTools のアウトラインにすべての関数が正しく表示されます。これまで、DevTools には一部の関数しか表示されませんでした。

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

Chromium の問題: 761019、1191465

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

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

これまで、DevTools ではエラーのスタック トレース内に汎用の Wasm 参照のみが表示されていました。

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

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

Chromium の問題: 1189161

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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