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

DevTools の新機能（Chrome 86）

Jecelyn Yeen

新しいメディアパネル

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

新しいメディアパネル

DevTools の新しいメディアパネル以前は、動画プレーヤーに関するロギングとデバッグ情報を chrome://media-internals に保存していました。

新しいメディアパネルでは、動画プレーヤー自体と同じブラウザタブで、イベント、ログ、プロパティ、フレームデコードのタイムラインを簡単に表示できるようになりました。潜在的な問題（フレーム落ちが発生する理由、JavaScript が予期しない方法でプレーヤーとやり取りしている理由など）をより迅速にライブ表示して検査できます。

Chromium の問題: 1018414

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

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

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

ノードのスクリーンショットをキャプチャする

Chromium の問題: 1100253

[問題] タブの更新

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

コンソールメッセージに関する問題

サードパーティ Cookie の問題は、[問題] タブにデフォルトで非表示になりました。新しい [サードパーティ 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 メディアクエリをエミュレートできるようになりました。

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

Chromium の問題: 1096068

新しい JavaScript 機能のサポート

DevTools での最新の JavaScript 言語機能のサポートが強化されました。

論理割り当て演算子 - DevTools で、コンソールと [Sources] パネルで新しい演算子 &&=、||=、??= による論理割り当てがサポートされるようになりました。
プリティプリントの数値区切り文字 - DevTools で、[Sources] パネルの数値区切り文字が適切にプリティプリントされるようになりました。

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 で、新しいブラウザタブ chrome://serviceworker-internals/?devtools で他のオリジンの Service Worker の全リストを表示するリンクが提供されるようになりました。

これまで DevTools では、[アプリケーション] パネル > [Service Worker] ペインにネストされたリストが表示されていました。

他のオリジンにリンクする

Chromium の問題: 807440

フィルタしたアイテムの適用範囲の概要を表示

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

以下の例では、概要では最初に 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

[Application] パネルの新しいフレーム詳細ビュー

DevTools に各フレームの詳細ビューが表示されるようになりました。[Application] パネルの [Frames] メニューの下にあるフレームをクリックしてアクセスします。

[Application] パネルの新しいフレーム詳細ビュー

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

[Network] パネルの人が読める `X-Client-Data` ヘッダー値

[Network] パネルでネットワークリソースを調べる際に、DevTools が [Headers] ペインにある X-Client-Data ヘッダー値をコードとしてフォーマットするようになりました。

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

人が読める形式の `X-Client-Data` ヘッダー値

Chromium の問題: 1103854

[スタイル] ペインでカスタムフォントの予測入力が可能に

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