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

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

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

Chromium の問題: 1090802

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

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

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

Chromium の問題: 1096068

新しい JavaScript 機能のサポート

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

• 論理代入演算子 - コンソール パネルとソース パネルで、新しい演算子 &&=、||=、??= を使用した論理代入がサポートされるようになりました。
• 数値区切り文字を整形して出力 - 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 を削除する。ページに一般公開されている JavaScript ソースマップがある場合、Lighthouse は監査を強化するようになりました。

Chromium の問題: 772558

Service Worker ペインでの「他のオリジン」リストの非推奨

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

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

Chromium の問題: 807440

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

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

次の例では、CSS フィルタリングが適用される前は概要が 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. と表示され、適用された後は 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 プロパティのカラー選択ツールを開きます。[コントラスト比] セクションを開くと、DevTools で AA と AAA の基準を満たす色の候補が表示されます。提案された色をクリックして、色を適用します。

Chromium の問題: 1093227

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

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

Chromium の問題: 1105205、1116085

[ネットワーク] パネルに表示される人間が読める形式の X-Client-Data ヘッダー値

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

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

Chromium の問題: 1103854

[スタイル] ペインでカスタム フォントを自動補完する

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

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

Chromium の問題: 1106221

ネットワーク パネルにリソースタイプを常に表示

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

以前は、デベロッパー ツールで型が 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 の新機能シリーズで取り上げられたすべての内容の一覧。