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

DevTools の新機能（Chrome 89）

Jecelyn Yeen

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

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

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

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

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

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

Chromium の問題: 1142804

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

[Sources] パネルで、Trusted Type に違反する行の横に警告アイコンが表示されるようになりました。そのアイコンにカーソルを合わせると、例外をプレビューできます。これをクリックして [問題] タブを開くと、例外の詳細と修正方法のガイダンスが表示されます。

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

Chromium の問題: 1150883

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

スクロールしなければ見えない範囲のコンテンツを含め、ノード全体のスクリーンショットをキャプチャできるようになりました。以前は、ビューポートにコンテンツが表示されないため、スクリーンショットが切り取られていました。ページ全体のスクリーンショットも正確になりました

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

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

Chromium の問題: 1003629

ネットワークリクエスト用の新しい [Trust Tokens] タブ

新しい [Trust Tokens] タブで、Trust Token ネットワークリクエストを調べます。

Trust Token は、パッシブなトラッキングを行うことなく、不正行為を阻止し、bot と人間を区別するための新しい API です。Trust Token の利用を開始する方法を確認する。

今後のリリースで、さらなるデバッグのサポートが予定されています。

ネットワークリクエスト用の新しい [Trust Token] タブ

Chromium の問題: 1126824

Lighthouse パネル内の Lighthouse 7

[Lighthouse] パネルでは Lighthouse 7 が実行中になります。変更内容の完全なリストについては、リリースノートをご覧ください。

Lighthouse パネル内の Lighthouse 7

Lighthouse 7 の新しい監査:

Largest Contentful Paint（LCP）イメージをプリロードする。LCP 要素で使用されるイメージがプリロードされているかどうかを監査して、LCP 時間を改善します。
Issues パネルに記録された問題。Issues パネルに未解決の問題のリストが表示されます。
プログレッシブウェブアプリ（PWA）。PWA カテゴリが大きく変わりました。
Installable グループは、Chrome のインストール可能条件を有効にする機能チェックだけを利用するようになりました。これらは、[Manifest] ペインに表示されるシグナルと同じです。
- 「Service Worker の登録」の監査は PWA Optimized グループに移動し、主要な「インストール要件」の監査に「HTTPS を使用」の監査が追加されました。
- 高速かつ信頼性グループが削除されます。刷新された「インストール要件」監査にはオフライン機能チェックが含まれるため、「オフライン時に現在のページと start_url が 200 で応答する」の監査が削除されました。「モバイルネットワークでのページの読み込み速度は十分」の監査も削除されました。

Chromium の問題: 772558

[要素] パネルの更新

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

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

[要素] パネルで要素を選択し、要素の状態を切り替えます。スタイルの強制と検査を行うには、:target チェックボックスを有効にします。

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

CSS の `:target` 状態を強制する

Chromium の問題: 1156628

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

新しい [要素を複製] ショートカットを使用すると、要素のクローンをすぐに作成できます。

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

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

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

要素が重複しています

Chromium の問題: 1150797、1150797

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

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

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

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

Chromium の問題: 1147016

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

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

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

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

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

コピーセレクタ。現在のセレクタ名をコピーします。
ルールをコピー。現在のセレクタのルールをコピーします。
すべての宣言をコピー: 現在のルールの下のすべての宣言（無効なプロパティや接頭辞が付加されたプロパティを含む）をコピーします。

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

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

Chromium の問題: 1152391

Cookie の更新

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

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

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

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

Chromium の問題: 997625

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

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

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

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

Chromium の問題: 978059

[Storage] ペインでサードパーティ Cookie を消去する新しいオプション

[Storage] ペインでサイトデータを消去するときに、DevTools がデフォルトでファーストパーティの Cookie のみを消去するようになりました。[サードパーティ Cookie を含める] を有効にして、サードパーティ Cookie も削除します。

サードパーティ Cookie を削除するオプション

Chromium の問題: 1012337

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

カスタムデバイスの User-Agent Client Hints を編集できるようになりました。

[設定] > [デバイス] に移動し、[カスタムデバイスの追加...] をクリックします。[User agent client Hints] セクションを開いて、クライアントのヒントを編集します。

User-Agent Client Hints API の編集

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

Chromium の問題: 1073909

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

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

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

ネットワークログを記録

Chromium の問題: 1122580

[ネットワーク] パネルで WebTransport 接続を表示する

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

WebTransport 接続

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

Chromium の問題: 1152290

「オンライン」から「スロットリングなし」に名前変更

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

ネットワークログを記録

Chromium の問題: 1028078

コンソール、ソースパネル、スタイルペインの新しいコピーオプション

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

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

コンソールでオブジェクトをコピーする

[Sources] パネルでオブジェクトをコピーする

Chromium の問題: 1149859、1148353

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

以下を右クリックしてファイル名をコピーできるようになりました。

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

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

[Sources] パネルでファイル名をコピーする

[スタイル] ペインでファイル名をコピーする

Chromium の問題: 1155120

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

フレームの詳細ビューの新しい Service Worker 情報

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

[アプリケーション] パネルで、Service Worker のフレームを展開し、[Service Worker] ツリーで Service Worker を選択して詳細を表示します。

フレームの詳細ビューの Service Worker 情報

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 で [Sources] パネルを開きます。左側のペインで [録画] タブを選択します。新しい録音を追加し、ファイルに名前を付けます（例: test01.js）。

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

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

これは初期段階のテストです。今後、レコーダー機能の改善と拡張を予定しています。

Puppeteer レコーダー

Chromium の問題: 1144127

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

新しい Font Editor は、[スタイル] ペインにあるポップオーバーエディタで、フォント関連のプロパティに対応しており、ウェブページに最適なタイポグラフィを見つけることができます。

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

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

Chromium の問題: 1093229

CSS Flexbox デバッグツール

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

DevTools で、CSS align-items プロパティを見やすくするため、指針を描くようになりました。CSS gap プロパティもサポートされています。この例では、CSS gap: 12px; を使用しています。各ギャップのハッチングパターンに注目してください。

フレックスボックス

Chromium の問題: 1139949

新しい [CSP 違反] タブ

新しい [CSP 違反] タブで、すべてのコンテンツセキュリティポリシー（CSP）違反を一目で確認できます。この新しいタブは試験運用版であり、CSP と Trusted Type に関する違反が大量にあるウェブページをより簡単に操作できるようにするものです。

[CSP 違反] タブ

Chromium の問題: 1137837

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

カラー選択ツールの AA/AAA ガイドラインのコントラスト比は Advanced Perceptual Contrast Algorithm（APCA）に置き換わります。

APCA は、色知覚に関する最新の研究に基づいてコントラストを計算する新しい方法です。AAA や AAA のガイドラインと比較すると、APCA はコンテキストに依存します。コントラストは、テキストの空間プロパティ（フォントの太さとサイズ）、色（テキストと背景で認識される明度の違い）、コンテキスト（周囲光、周囲、テキストの本来の目的）に基づいて計算されます。

カラー選択ツールの APCA

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

Chromium の問題: 1121900

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

デフォルトの開発ブラウザとして 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 動画にコメントを残してください。