DevTools の新機能（Chrome 86）

ニューメディア パネル

DevTools の [メディア パネル] にメディア プレーヤーの情報が表示されるようになりました。

DevTools の新しいメディアパネルが導入される前は、動画プレーヤーに関するロギング情報とデバッグ情報は chrome://media-internals にありました。

新しい [メディア] パネルでは、ビデオ プレーヤー自体と同じブラウザタブで、イベント、ログ、プロパティ、フレームデコードのタイムラインを簡単に確認できます。発生する可能性のある問題（フレーム落ちが発生する理由、JavaScript がプレーヤーを予期しない方法で操作する理由など）をライブビューで確認し、迅速に検証できます。

Chromium の問題: 1018414

要素パネルのコンテキスト メニューからノードのスクリーンショットをキャプチャする

要素パネルのコンテキスト メニューからノードのスクリーンショットをキャプチャできるようになりました。

たとえば、要素を右クリックして [ノードのスクリーンショットをキャプチャ] を選択すると、目次のスクリーンショットをキャプチャできます。

Chromium の問題: 1100253

[問題] タブの更新

コンソール パネルの問題に関する警告バーが、通常のメッセージに置き換えられました。

サードパーティ Cookie の問題は、[問題] タブでデフォルトで非表示になりました。表示するには、新しい [サードパーティ Cookie の問題を含める] チェックボックスをオンにします。

Chromium の問題: 1096481、1068116、1080589

見つからないローカル フォントをエミュレートする

[レンダリング] タブを開き、新しい [ローカル フォントを無効にする] 機能を使用して、@font-face ルールに不足している local() ソースをエミュレートします。

たとえば、デバイスに「Rubik」フォントがインストールされていて、@font-face src ルールで local() フォントとして使用されている場合、Chrome はデバイスのローカル フォント ファイルを使用します。

[ローカル フォントを無効にする] が有効になっている場合、DevTools は local() フォントを無視し、ネットワークから取得します。

デベロッパーとデザイナーは、開発中に同じフォントの 2 つの異なるコピーを使用することがよくあります。

• デザインツール用のローカルフォント
• コード用のウェブフォント

ローカル フォントを無効にすると、次のようなことが容易になります。

• ウェブフォント読み込みのパフォーマンスと最適化をデバッグして測定する
• CSS @font-face ルールの正確性を確認する
• ウェブフォントとローカル バージョンの違いを確認する

Chromium の問題: 384968

非アクティブなユーザーをエミュレートする

Idle Detection API を使用すると、デベロッパーは非アクティブなユーザーを検出し、アイドル状態の変化に応答できます。実際のアイドル状態の変化を待たずに、DevTools の [センサー] タブでユーザー状態と画面状態の両方のアイドル状態の変化をエミュレートできるようになりました。[センサー] タブはドロワーから開くことができます。

Chromium の問題: 1090802

prefers-reduced-data をエミュレートする

prefers-reduced-data メディアクエリは、ページのレンダリングに使用するデータ量が少ない代替コンテンツをユーザーが好むかどうかを検出します。

DevTools を使用して prefers-reduced-data メディアクエリをエミュレートできるようになりました。

Chromium の問題: 1096068

新しい JavaScript 機能のサポート

DevTools で、最新の JavaScript 言語機能の一部がより適切にサポートされるようになりました。

• 論理代入演算子 - DevTools で、コンソールとソースパネルの新しい演算子 &&=、||=、??= による論理代入がサポートされるようになりました。
• 数値区切り文字の美しい表示 - DevTools で、[ソース] パネルの数値区切り文字が適切に美しく表示されるようになります。

Chromium の問題: 1086817、1080569

Lighthouse パネルの Lighthouse 6.2

Lighthouse パネルで Lighthouse 6.2 が実行されるようになりました。変更点の一覧については、リリースノートをご覧ください。

Lighthouse 6.2 の新しい監査:

• メインスレッドでタスクが長時間実行されないようにしてください。メインスレッドで長時間実行されているタスクを報告します。入力の遅延に最も影響しているタスクを特定する際に役立ちます。
• リンクはクロール可能です。アンカー要素の href 属性に適切なリンク先が設定されていて、リンクを見つけられるようになっていることを確認します。
• サイズ指定のない画像要素 - 画像要素に明示的な width と height が設定されているかどうかを確認します。画像サイズを明示的に指定すると、レイアウトの変更を抑えて、CLS を改善できます。
• 合成されていないアニメーションは使用しないでください。合成されていないアニメーションが不自然に表示され、CLS が低下しているという報告。
• unload イベントをリッスンします。unload イベントを報告します。unload イベントは確実に発生しないため、代わりに pagehide または visibilitychange イベントの使用を検討してください。

Lighthouse 6.2 の監査の更新:

• 使用していない JavaScript を削除する。Lighthouse では、ページに一般公開されている JavaScript ソースマップがある場合、監査が強化されます。

Chromium の問題: 772558

[Service Workers] ペインでの「他のオリジン」のリスト表示の非推奨

DevTools に、他のオリジンの Service Worker の完全なリストを新しいブラウザタブ（chrome://serviceworker-internals/?devtools）で表示するためのリンクが追加されました。

以前の DevTools では、[Application] パネル > [Service workers] ペインにネストされたリストが表示されていました。

Chromium の問題: 807440

フィルタされたアイテムの補償範囲の概要を表示する

DevTools で、[Coverage] タブでフィルタが適用されたときに、カバレッジ情報の概要が再計算され、動的に表示されるようになります。以前は、[カバレッジ] タブには、すべてのカバレッジ情報の概要が常に表示されていました。

以下の例では、概要が最初は 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. で、CSS フィルタが適用された後に 57 kB of 604 kB (10%) used so far. 546 kB unused. になっています。

Chromium の問題: 1061385

アプリケーション パネルの新しいフレーム詳細ビュー

DevTools に、フレームごとの詳細ビューが表示されるようになりました。フレーム パネルの [アプリケーション] メニューでフレームをクリックすると、フレーム パネルにアクセスできます。[フレーム] メニュー

Chromium の問題: 1093247

開いているウィンドウのフレームの詳細

DevTools で、開いているウィンドウやポップアップがフレームツリーの下に表示されるようになりました。開いているウィンドウのフレームの詳細ビューには、追加のセキュリティ情報が表示されます。

Chromium の問題: 1107766

セキュリティと分離に関する情報（COEP / COOP）

DevTools のフレーム詳細に、安全なコンテキスト、Cross-Origin-Embedder-Policy（COEP）と Cross-Origin-Opener-Policy（COOP）が表示されるようになりました。

フレームの詳細ビューには、まもなくその他のセキュリティ情報が追加されます。

Chromium の問題: 1051466

[要素] パネルと [ネットワーク] パネルの更新

[スタイル] ペインに表示されるアクセシブルな色の候補

DevTools で、色のコントラストの低いテキストに対して色の候補が提示されるようになりました。

以下の例では、h1 のテキストはコントラストが低くなっています。これを修正するには、[スタイル] ペインで color プロパティのカラーピッカーを開きます。[コントラスト比] セクションを開くと、AA と AAA の色の候補が DevTools に表示されます。提案された色をクリックして、その色を適用します。

Chromium の問題: 1093227

[要素] パネルに [プロパティ] ペインを復元

プロパティ ペインが復活しました。このペインは Chrome 84 で非推奨になりました。今後のバージョンの DevTools では、要素のプロパティを検査するワークフローを改善する予定です。

Chromium の問題: 1105205、1116085

[ネットワーク] パネルの人間が読める X-Client-Data ヘッダー値

[Network] パネルでネットワーク リソースを検査するときに、[Headers] ペイン内の X-Client-Data ヘッダー値がコードとしてフォーマットされるようになりました。

X-Client-Data HTTP ヘッダーには、ブラウザで有効になっているテスト ID と Chrome フラグのリストが含まれています。未加工のヘッダー値は、base64 でエンコードされたシリアル化された プロトコル バッファであるため、不透明な文字列のように見えます。コンテンツを開発者にわかりやすくするため、DevTools でデコードされた値が表示されるようになりました。

Chromium の問題: 1103854

スタイルペインでカスタム フォントを自動入力する

[スタイル] ペインで font-family プロパティを編集するときに、インポートしたフォントフェイスが CSS 自動補完のリストに追加されるようになりました。

この例では、'Noto Sans' はローカルマシンにインストールされているカスタム フォントです。CSS 補完リストに表示されます。以前はそうではありませんでした。

Chromium の問題: 1106221

ネットワーク パネルでリソースタイプを一貫して表示

DevTools で、元のネットワーク リクエストと同じリソースタイプが常に表示されるようになりました。また、リダイレクト（ステータス 302）が発生すると、[Type] 列の値に / Redirect が追加されるようになりました。

以前は、DevTools で型が Other に変更されることがありました。

Chromium の問題: 997694

[要素] パネルと [ネットワーク] パネルの消去ボタン

[スタイル] ペインと [ネットワーク] パネルのフィルタ テキスト ボックス、および [要素] パネルの DOM 検索テキスト ボックスに [消去] ボタンが追加されました。[クリア] をクリックすると、入力したテキストがすべて削除されます。

Chromium の問題: 1067184

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

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

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

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

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

DevTools の新機能

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