DevTools の新機能（Chrome 89）

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

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

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

Trusted Types API を使用すると、DOM ベースのクロスサイト スクリプティングの脆弱性を防ぐことができます。Trusted Types を使用して DOM XSS の脆弱性のないアプリを作成、確認、メンテナンスする方法については、こちらをご覧ください。

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

Chromium の問題: 1142804

[ソース] パネルの問題を [問題] タブにリンクする

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

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 のインストール可能条件を有効にする機能チェックによって完全に機能するようになりました。これらは、[マニフェスト] ペインに表示されるシグナルと同じです。

  • 「サービス ワーカーを登録する…」監査が [PWA 最適化] グループに移動し、「HTTPS を使用する」監査が主要な「インストール要件」監査の一部として含まれるようになりました。
  • [高速で信頼性の高い] グループは削除されます。刷新された「インストール要件」の監査項目にオフライン機能のチェックが含まれているため、「現在のページと 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 の更新

URL でデコードされた Cookie を表示するオプションを追加

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

[アプリケーション] パネルに移動し、[Cookie] ペインを選択します。リスト内の任意の Cookie を選択します。新しい [デコードされた URL を表示] チェックボックスをオンにすると、デコードされた Cookie が表示されます。

Chromium の問題: 997625

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

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

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

Chromium の問題: 978059

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

[ストレージ] ペインでサイトデータを消去する場合、デフォルトでファーストパーティ 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

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

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

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

Chromium の問題: 1149859、1148353

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

以下の項目を右クリックすると、ファイル名をコピーできるようになりました。

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

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

Chromium の問題: 1155120

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

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

DevTools で、専用 Service Worker を作成したフレームの下に専用 Service Worker が表示されるようになりました。

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

Chromium の問題: 1122507

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

[API の可用性] セクションに performance.measureMemory() 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）。

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

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

これは初期段階の試験運用である点にご注意ください。今後、レコーダーの機能を改善し、拡張していく予定です。

Chromium の問題: 1144127

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

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

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

Chromium の問題: 1093229

CSS フレックス ボックスのデバッグツール

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

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

Chromium の問題: 1139949

新しい [CSP 違反] タブ

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

Chromium の問題: 1137837

新しい色のコントラスト計算 - 高度な知覚コントラスト アルゴリズム（APCA）

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

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 の新機能シリーズで取り上げられたすべての内容のリスト。