DevTools の新機能（Chrome 89）

Trusted Types 違反のデバッグのサポート

Trusted Type 違反のブレークポイント

[ソース] パネルで、Trusted Type 違反のブレークポイントを設定して例外をキャッチできるようになりました。

Trusted Types API は、DOM ベースのクロスサイト スクリプティングの脆弱性を防ぐのに役立ちます。Trusted Types を使用して DOM XSS の脆弱性のないアプリケーションを作成、レビュー、保守する方法については、こちらをご覧ください。

[ソース] パネルで、[デバッガ] サイドバー ペインを開きます。[CSP 違反ブレークポイント] セクションを開き、[Trusted Type 違反] チェックボックスをオンにして、例外で一時停止します。こちらのデモページでお試しください。

Chromium の問題: 1142804

[Sources] パネルの問題を [Issues] タブにリンクする

[ソース] パネルに、信頼できる型に違反している行の横に警告アイコンが表示されるようになりました。カーソルを合わせると、例外のプレビューが表示されます。クリックすると [問題] タブが開き、例外の詳細と解決方法が表示されます。

Chromium の問題: 1150883

ビューポート外のノードのスクリーンショットをキャプチャ

折り返しより下のコンテンツを含むノード全体のスクリーンショットを撮影できるようになりました。以前は、ビューポートに表示されていないコンテンツのスクリーンショットは切り取られていました。全画面のスクリーンショットも正確になりました。

[要素] パネルで、要素を右クリックして [ノードのスクリーンショットをキャプチャ] を選択します。

Chromium の問題: 1003629

ネットワーク リクエストの新しい [トラスト トークン] タブ

新しい [トラスト トークン] タブでトラスト トークンのネットワーク リクエストを検査します。

Trust Token は、パッシブ トラッキングを行わずに不正行為を防いで bot と人間を見分けるための新しい API です。トラスト トークンの使用を開始する方法を確認する。

今後のリリースでは、デバッグのサポートがさらに追加される予定です。

Chromium の問題: 1126824

Lighthouse パネルの Lighthouse 7

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

Lighthouse 7 の新しい監査:

• Largest Contentful Paint（LCP）の画像をプリロードする。LCP 時間を改善するため、LCP 要素で使用する画像がプリロードされているかどうかを監査します。
• [Issues] パネルに記録された問題。[Issues] パネルに未解決の問題のリストが表示されます。
• プログレッシブ ウェブアプリ（PWA）。PWA カテゴリはかなり大きく変更されました。

• インストール可能グループは、Chrome のインストール可能条件を有効にする機能チェックによって完全に制御されるようになりました。これらは、マニフェスト ペインに表示されるシグナルと同じです。

  • 「Registers a service worker…」監査は [PWA Optimized] グループに移動し、「Uses HTTPS」監査は「installability requirements」監査の一部として含まれるようになりました。
  • [スピードと高い信頼性] グループが削除されます。「インストール可能性の要件」の監査が刷新され、オフライン機能のチェックが含まれるようになったため、「現在のページと start_url はオフライン時にステータス 200 の応答を返す」監査が削除されました。「ページ読み込みはモバイル ネットワークで十分な速度で実行されています」の監査も削除されました。

Chromium の問題: 772558

[要素] パネルの更新

CSS :target 状態の強制をサポート

これで、DevTools を使用して CSS の :target 状態を強制的に設定し、確認できるようになりました。

[要素] パネルで要素を選択し、要素の状態を切り替えます。:target チェックボックスをオンにすると、スタイルが強制的に適用され、検査されます。

URL のハッシュと要素の ID が同じ場合に要素のスタイルを設定するには、:target 疑似クラスを使用します。こちらのデモで、ご自身でお試しください。この新しい DevTools 機能を使用すると、URL を毎回手動で変更しなくても、このようなスタイルをテストできます。

Chromium の問題: 1156628

要素を複製する新しいショートカット

新しい [要素を複製] ショートカットを使用して、要素を瞬時に複製します。

[要素] パネルで要素を右クリックし、[要素を複製] を選択します。その下に新しい要素が作成されます。

また、キーボード ショートカットを使用して要素を複製することもできます。

• Mac: Shift + Option + ⬇️
• Windows/ Linux: Shift + Alt + ⬇️

Chromium の問題: 1150797、1150797

カスタム CSS プロパティのカラー選択ツール

[スタイル] ペインに、カスタム CSS プロパティのカラー選択ツールが表示されるようになりました。

また、Shift キーを押しながらカラー選択ツールをクリックすると、カラー値の RGBA、HSLA、16 進数表現を切り替えることができます。

Chromium の問題: 1147016

CSS プロパティをコピーするための新しいショートカット

いくつかの新しいショートカットを使用して、CSS プロパティをよりすばやくコピーできるようになりました。

[要素] パネルで要素を選択します。次に、[スタイル] ペインで CSS クラスまたは CSS プロパティを右クリックして、値をコピーします。

CSS クラスのコピー オプション:

• コピー セレクタ。現在のセレクタ名をコピーします。
• ルールをコピーします。現在のセレクタのルールをコピーします。
• すべての宣言をコピー: 無効なプロパティや接頭辞付きのプロパティなど、現在のルールのすべての宣言をコピーします。

CSS プロパティのコピー オプション:

• 宣言をコピーします。現在の行の宣言をコピーします。
• プロパティをコピーします。現在の行のプロパティをコピーします。
• 値をコピー: 現在の行の値をコピーします。

Chromium の問題: 1152391

Cookie の更新

デコードされた Cookie を表示する新しいオプション

[Cookie] ペインで URL デコードされた Cookie の値を表示できるようになりました。

[Application] パネルに移動し、[Cookies] ペインを選択します。リストから任意の Cookie を選択します。[デコードされた URL を表示] チェックボックスをオンにすると、デコードされた Cookie が表示されます。

Chromium の問題: 997625

表示されている Cookie のみを消去する

[Cookie] ペインの [すべての Cookie を消去] ボタンが [フィルタ済み Cookie を消去] ボタンに置き換えられました。

[Application] パネル > [Cookies] ペインで、テキストボックスにテキストを入力して Cookie をフィルタします。この例では、「PREF」でリストをフィルタしています。[フィルタ済み Cookie を消去] ボタンをクリックして、表示されている Cookie を削除します。フィルタ テキストをクリアすると、他の Cookie がリストに残っていることがわかります。以前は、すべての Cookie を削除するオプションしかありませんでした。

Chromium の問題: 978059

[ストレージ] ペインにサードパーティ Cookie を消去する新しいオプションが追加されました

[ストレージ] ペインでサイトデータを消去する際、DevTools はデフォルトでファーストパーティの Cookie のみを消去するようになりました。[サードパーティの Cookie を含む] を有効にすると、サードパーティの Cookie も削除されます。

Chromium の問題: 1012337

カスタム デバイスの User-Agent Client Hints を編集する

カスタム デバイスのユーザー エージェント クライアントのヒントを編集できるようになりました。

[設定] > [デバイス] に移動し、[カスタム デバイスを追加...] をクリックします。[ユーザー エージェント クライアントのヒント] セクションを開き、クライアントのヒントを編集します。

User-Agent Client Hints は、ユーザー エージェント文字列に代わるもので、デベロッパーがプライバシーを保護しつつ、人間工学に基づいた方法でユーザーのブラウザに関する情報にアクセスできるようにします。User-Agent Client Hints の詳細については、web.dev/user-agent-client-hints/ をご覧ください。

Chromium の問題: 1073909

ネットワーク パネルの更新

「ネットワーク ログを記録」の設定を保持

DevTools で [ネットワーク ログを記録] の設定が保持されるようになりました。以前は、ページが再読み込みされるたびに、DevTools でユーザーの選択がリセットされていました。

Chromium の問題: 1122580

ネットワーク パネルで WebTransport 接続を表示

[ネットワーク] パネルに WebTransport 接続が表示されるようになりました。

WebTransport は、低レイテンシの双方向クライアント サーバー メッセージングを提供する新しい API です。ユースケースや、今後の実装に関するフィードバックの送信方法については、web.dev/webtransport/ をご覧ください。

Chromium の問題: 1152290

「オンライン」の名前を「スロットリングなし」に変更しました

ネットワーク エミュレーション オプションの [オンライン] の名前が [スロットリングなし] に変更されました。

Chromium の問題: 1028078

コンソール、[ソース] パネル、[スタイル] ペインに新しいコピー オプションを追加

コンソール パネルとソースパネルでオブジェクトをコピーするための新しいショートカット

Console パネルと Sources パネルの新しいショートカットを使用して、オブジェクトの値をコピーできるようになりました。これは、コピーする大きなオブジェクト（長い配列など）がある場合に特に便利です。

Chromium の問題: 1149859、1148353

[ソース] パネルと [スタイル] ペインでファイル名をコピーするための新しいショートカット

ファイル名をコピーできるようになりました。右クリックして次の操作を行います。

• [ソース] パネル内のファイル
• [要素] パネルの [スタイル] ペインにあるファイル名

コンテキスト メニューから [ファイル名をコピー] を選択して、ファイル名をコピーします。

Chromium の問題: 1155120

フレームの詳細ビューの更新

フレームの詳細ビューに新しい Service Worker の情報が表示される

DevTools で、専用サービス ワーカーが作成したフレームの下に表示されるようになりました。

[アプリケーション] パネルで、サービス ワーカーを含むフレームを開き、[サービス ワーカー] ツリーでサービス ワーカーを選択して詳細を表示します。

Chromium の問題: 1122507

フレームの詳細ビューでメモリ情報を測定する

performance.measureMemory() API のステータスが [API の可用性] セクションに表示されるようになりました。

新しい performance.measureMemory() API は、ウェブページ全体のメモリ使用量を推定します。この新しい API を使用してウェブページの合計メモリ使用量をモニタリングする方法については、こちらの記事をご覧ください。

Chromium の問題: 1139899

[問題] タブからフィードバックを送信する

問題メッセージを改善したい場合は、コンソールまたは [その他の設定] > [その他のツール] > [問題] に移動して [問題] タブを開きます。問題に関するメッセージを開き、[問題に関するこのメッセージは役に立ちましたか？] をクリックすると、ポップアップでフィードバックを送信できます。

[パフォーマンス] パネルのドロップされたフレーム

[パフォーマンス] パネルで読み込みパフォーマンスを分析する際に、[フレーム] セクションでドロップされたフレームが赤でマークされるようになりました。カーソルを合わせると、フレームレートを確認できます。

Chromium の問題: 1075865

デバイスモードで折りたたみ式デバイスとデュアル スクリーンをエミュレートする

DevTools でデュアル スクリーン デバイスと折りたたみ式デバイスをエミュレートできるようになりました。

デバイス ツールバーを有効にしたら、Surface Duo または Samsung Galaxy Fold のいずれかを選択します。

新しいスパン アイコンをクリックして、シングル スクリーンまたは折りたたみ状態と、デュアル スクリーンまたは展開状態を切り替えます。

試験運用版のウェブ プラットフォーム機能を有効にして、新しい CSS メディア screen-spanning 機能と JavaScript getWindowSegments API にアクセスすることもできます。試験運用版アイコンは、試験運用版ウェブ プラットフォーム機能フラグの状態を表示します。フラグがオンになっている場合、アイコンがハイライト表示されます。chrome://flags に移動して、フラグを切り替えます。

Chromium の問題: 1054281

試験運用版の機能

Puppeteer Recorder でブラウザ テストを自動化する

DevTools で、ブラウザ操作に基づいて Puppeteer スクリプトを生成できるようになりました。これにより、ブラウザ テストの自動化が容易になります。Puppeteer は、DevTools プロトコルを介して Chrome または Chromium を制御する高レベルの API を提供する Node.js ライブラリです。

こちらのデモページにアクセスします。DevTools で [ソース] パネルを開きます。左側のペインで [録画] タブを選択します。新しい録音を追加し、ファイルに名前を付けます（例: test01.js）。

下部の [Record]（記録）ボタンをクリックして、やり取りの記録を開始します。画面上のフォームに入力してみてください。Puppeteer コマンドがファイルに適切に追加されていることを確認します。[Record]（録画）ボタンをもう一度クリックして、録画を停止します。

スクリプトを実行するには、Puppeteer の公式サイトのスタートガイドに沿って操作します。

これは初期段階のテストです。今後、レコーダーの機能は改善、拡張される予定です。

Chromium の問題: 1144127

[スタイル] ペインのフォント エディタ

新しいフォント エディタは、フォント関連のプロパティの [スタイル] ペインにあるポップオーバー エディタで、ウェブページに最適なタイポグラフィを見つけるのに役立ちます。

ポップオーバーは、一連の直感的な入力タイプを使用してタイポグラフィを動的に操作するためのクリーンな UI を提供します。

Chromium の問題: 1093229

CSS flexbox デバッグツール

DevTools で、前回のリリース以降、flexbox のデバッグの試験運用版サポートが追加されました。

DevTools で、CSS の align-items プロパティを視覚化するのに役立つガイドラインが描画されるようになりました。CSS の gap プロパティもサポートされています。この例では、CSS gap: 12px; があります。各ギャップのハッチング パターンに注目してください。

Chromium の問題: 1139949

新しい [CSP 違反] タブ

新しい [CSP 違反] タブで、すべてのコンテンツ セキュリティ ポリシー（CSP）違反を一目で確認できます。この新しいタブは、CSP と信頼できる型の違反が大量に発生しているウェブページを簡単に操作できるようにするためのテストです。

Chromium の問題: 1137837

新しい色のコントラストの計算 - Advanced Perceptual Contrast Algorithm（APCA）

高度な知覚コントラスト アルゴリズム（APCA）が、カラー選択ツールの AA/AAA ガイドラインのコントラスト比に代わります。

APCA は、色の知覚に関する最新の研究に基づいてコントラストを計算する新しい方法です。AA/AAA のガイドラインと比較すると、APCA はコンテキストへの依存度が高くなります。コントラストは、テキストの空間プロパティ（フォントの太さとサイズ）、色（テキストと背景の知覚される明るさの差）、コンテキスト（周囲の光、周囲の状況、テキストの意図された目的）に基づいて計算されます。

この例では、APCA のしきい値が 38% であることを示しています。コントラスト比は、記載されている値以上である必要があります。この値は、この APCA 参照テーブルを参照して、フォントの太さとサイズに基づいて計算されます。

Chromium の問題: 1121900

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

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

DevTools の新機能

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