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

DevTools の新機能（Chrome 91）

Jecelyn Yeen

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

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

[Web Vitals] 情報のポップアップ

Chromium の問題: 1147872

CSS の Scroll-snap を可視化する

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

CSS の Scroll-Snap

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

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

Chromium の問題: 862450

新しい Memory Inspector

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

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

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

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

メモリインスペクタ

Chromium の問題: 1166577

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

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

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

Chromium の問題: 1066772

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

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

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

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

画像のアスペクト比情報は、画像をプレビューするために [Network] パネルにも表示されます。

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

Chromium に関する問題: 1149832、1170656

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

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

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

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

Chromium の問題: 1162042

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

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

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

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

Chromium の問題: 1076198

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

[スタイル] ペインのオートコンプリート UI で、CSS キーワード accent-color が検出されるようになりました。ウェブデベロッパーは、このキーワードを使用して、要素によって生成される 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

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

[Frame details] ビューの [Permissions policy] セクションで、ブロックされた機能の詳細を確認できるようになりました。

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

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

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

Chromium の問題: 1158827

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

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

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

[Cache storage] ペインの新しい `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 ファイルの Outline のサポートが改善されました。[ソース] パネルで 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 動画でコメントを残してください。