このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 91）

Jecelyn Yeen

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

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

Web Vitals 情報のポップアップ

Chromium の問題: 1147872

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

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

CSS スクロールスナップ

ページ（このデモページなど）の 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

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

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

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

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

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

Chromium の問題: 1158827

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

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

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

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

[Cache Storage] ペインの新しい Vary Header 列を使用して、Vary HTTP レスポンスヘッダーを表示します。

Vary Header 列

Chromium の問題: 1186049

ソースパネルの改善

新しい JavaScript 機能のサポート

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

この非公開ブランドチェック機能は in 演算子を拡張し、任意のオブジェクトで非公開クラスフィールドのテストをサポートする機能です。

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

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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。