DevTools の新機能（Chrome 91）

Jecelyn Yeen

[パフォーマンス] パネルに表示される [ウェブに関する指標] のポップアップ

[パフォーマンス] パネルの [ウェブに関する指標] マーカーにカーソルを合わせると、パフォーマンスが良好か、改善が必要か、不良かといったインジケーターを把握できます。

Web Vitals 情報のポップアップ

Chromium の問題: 1147872

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

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

CSS スクロール スナップ

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

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

Chromium の問題: 862450

新しい Memory Inspector

新しい Memory Inspector を使用して、JavaScript の ArrayBuffer と Wasm メモリを検査します。

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

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

この新しい Memory Inspector を使用して JavaScript の ArrayBuffer と WebAssembly.Memory を検査する方法について詳しくは、ドキュメントをご覧ください。

Memory Inspector

Chromium の問題: 1166577

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

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

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

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

Chromium の問題: 1066772

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

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

この情報は、画像についての理解を深め、必要に応じて最適化を行ううえで役立ちます。

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

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

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

Chromium の問題: 1149832、1170656

Content-Encoding を構成するオプションが表示された [新しいネットワークの条件] ボタン

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

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

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

Chromium の問題: 1162042

スタイルペインの機能強化

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

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

計算された値を表示する新しいショートカット

Chromium の問題: 1076198

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

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

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

アクセント カラー

Chromium の問題: 1092093

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

[問題] タブでは、問題がページエラー、今後の互換性を破る変更、改善可能な点に分類され、重大度をより的確に把握できるようになりました。[問題] タブを開くには、コンソールの [問題数] ボタンをクリックします。

  • ページエラー（赤色）。CORS ヘッダーが正しく設定されていないなど、ページの機能に直ちに影響を及ぼす問題。
  • 今後の互換性を破る変更（黄色）ページ機能が使用できなくなる原因となる、ウェブ プラットフォームに予定されている互換性のない変更を通知する問題（例: CORS RFC 1918 の変更予定に関する警告）。
  • 可能な改善の可能性（青）。ページに改善の余地があるものの、現時点ではページの基本機能に悪影響はない（例: ユーザー補助の問題）

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

Chromium の問題: 1183241

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

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

Trust Token は、パッシブなトラッキングを行うことなく、不正行為を阻止し、bot と人間を区別するための新しい API です。Trust Token の利用を開始する方法を確認する。

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

Chromium の問題: 1126824

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

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

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

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

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

Chromium の問題: 1158827

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

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

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

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

[Cache Storage] ペインの新しい 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 ファイルのアウトラインのサポートが改善されました。[Sources] パネルで、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 に関連するその他のことについて話し合います。

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

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