DevTools の新機能(Chrome 86)

新しいメディアパネル

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

新しいメディアパネル

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

新しいメディアパネルを使用すると、動画プレーヤー自体と同じブラウザタブで、フレーム デコードのイベント、ログ、プロパティ、タイムラインを簡単に確認できます。潜在的な問題をより迅速にライブビューと検査を行うことができます(フレーム ドロップが発生する理由、JavaScript が予期しない方法でプレーヤーとやり取りする理由など)。

Chromium の問題: 1018414

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

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

たとえば、コンテンツ テーブルのスクリーンショットを撮るには、要素を右クリックして [Capture node screenshot] を選択します。

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

Chromium の問題: 1100253

[問題] タブの更新

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

コンソール メッセージの問題

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

[サードパーティ Cookie の問題] チェックボックス

Chromium に関する問題: 109648110681161080589

欠落しているローカル フォントをエミュレートする

[レンダリング] タブを開き、新しいローカル フォントを無効にする機能を使用して、@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 のコンソールパネルと [ソース] パネルで、新しい演算子 &&=||=??= を使用した論理割り当てがサポートされるようになりました。
  • 数値区切り文字のプリティ プリント - DevTools で、[ソース] パネルで数値区切り文字が適切にプリティ プリントされるようになりました。

Chromium に関する問題: 10868171080569

Lighthouse パネルに表示された Lighthouse 6.2

Lighthouse パネルでは、Lighthouse 6.2 が稼働するようになります。変更の完全なリストについては、リリースノートをご覧ください。

画像サイズを解除

Lighthouse 6.2 の新しい監査:

  • 長いメインスレッド タスクを避ける。メインスレッドで最も長いタスクを報告します。入力遅延に最も寄与している要因を特定するのに有用です。
  • リンクはクロール可能です。アンカー要素の href 属性が適切なデスティネーションにリンクしているか、リンクが検出されるかどうかを確認します。
  • サイズ設定されていない画像要素 - 画像要素に widthheight が明示的に設定されているかどうかを確認します。明示的な画像サイズを使用すると、レイアウト シフトが減少し、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 では、[アプリケーション] パネル > [Service Worker] ペインにネストされたリストが表示されていました。

他のオリジンへのリンク

Chromium の問題: 807440

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

[Coverage] タブでフィルタが適用されていると、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 プロパティのカラー選択ツールを開きます。[コントラスト比] セクションを開くと、AA と AAA の色の候補が表示されます。提案された色をクリックして色を適用します。

Chromium の問題: 1093227

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

Chrome 84 でサポートが終了したプロパティ ペインが復活しました。DevTools の今後のバージョンでは、要素のプロパティを検査するワークフローを改善する予定です。

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

Chromium の問題: 1105205, 1116085

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

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

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

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

Chromium の問題: 1103854

[スタイル] ペインでカスタム フォントをオートコンプリートする

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

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

オートコンプリートのカスタム フォント

Chromium の問題: 1106221

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

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

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

ディスプレイ リダイレクトのリソースタイプ

Chromium の問題: 997694

[Elements] パネルと [Network] パネルの消去ボタン

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

[Elements] パネルと [Network] パネルの消去ボタン

Chromium の問題: 1067184

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

Chrome CanaryDevBeta を既定の開発ブラウザとして使用することをご検討ください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが実際に体験する前にサイト上の問題を検出したりできます。

Chrome DevTools チームへのお問い合わせ

投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。

  • crbug.com からご提案やフィードバックをお送りください。
  • DevTools の問題を報告するには、DevTools でその他のオプション アイコン その他   > [ヘルプ] > [DevTools の問題を報告する] を選択します。
  • @ChromeDevTools にツイートします。
  • 「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。

DevTools の新機能

DevTools の新機能シリーズで取り上げたすべての内容の一覧。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 はキャンセルされました

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59