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

DevTools の新機能（Chrome 89）

Jecelyn Yeen

Twitter GitHub ホームページ

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

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

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

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

[ソース] パネルで、[デバッガ] サイドバーパネルを開きます。[CSP Compliance Breakpoints] セクションを開き、[Trusted Type emissions] チェックボックスをオンにして、例外で一時停止します。こちらのデモページで実際に試してみましょう。

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

Chromium の問題: 1142804

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

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

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

Chromium の問題: 1150883

ビューポートの範囲を超えてノードのスクリーンショットをキャプチャする

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

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

ビューポートの範囲を超えてノードのスクリーンショットをキャプチャする

Chromium の問題: 1003629

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

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

Trust Token は、不正行為に対処し、パッシブトラッキングなしで bot と実際の人間を区別するための新しい API です。トラストトークンの利用を開始する方法を確認する。

次のリリースでは、さらに詳細なデバッグに対応する予定です。

ネットワークリクエスト用の新しい [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 カテゴリが大幅に変化しました。
インストール可能グループでは、Chrome のインストール可能な条件を有効にする機能チェックが、完全に利用されるようになりました。これらは、[Manifest] ペインに表示されるのと同じシグナルです。
- 「Service Worker を登録...」監査は PWA の最適化グループに移動され、「インストール要件」の主要な監査に「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 プロパティをすばやくコピーできるようになりました。

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

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

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

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

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

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

Chromium の問題: 1152391

Cookie の更新

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

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

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

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

Chromium の問題: 997625

公開されている Cookie のみを消去する

[Cookie ] ペインの [すべての Cookie を消去] ボタンが、[フィルタされた Cookie を消去] ボタンに変わりました。

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

公開されている Cookie のみを消去する

Chromium の問題: 978059

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

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

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

Chromium の問題: 1012337

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

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

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

User-Agent Client Hints API の編集

User-Agent Client Hints は、ユーザーエージェント文字列に代わるもので、デベロッパーはプライバシーを保護しながら、人間工学に基づく方法でユーザーのブラウザに関する情報にアクセスできます。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

「オンライン」を「スロットリングなし」に名称変更

ネットワークエミュレーションオプション「Online」の名称が「No Throttling」に変更されました。

ネットワークログを記録する

Chromium の問題: 1028078

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

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

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

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

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

Chromium の問題: 1149859、1148353

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

以下を右クリックしてファイル名をコピーできます。

[ソース] パネルのファイル、または
[要素] パネルの [スタイル] ペインでのファイル名

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

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

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

Chromium の問題: 1155120

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

[Frame Details] ビューの新しい Service Worker の情報

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

[Application] パネルで、Service Worker のあるフレームを開き、[Service Workers] ツリーで Service Worker を選択して詳細を表示します。

[Frame details] ビューの Service Worker 情報

Chromium の問題: 1122507

[Frame details] ビューでメモリ情報を測定する

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

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

メモリを測定する

Chromium の問題: 1139899

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

問題のメッセージを改善する場合は、コンソールから [Issues] タブに移動するか、[More Settings] > [その他のツール] > [Issues] > [Issues] タブを開きます。問題メッセージを開き、[Is the issue message help to you?] をクリックすると、ポップアップでフィードバックを送信できます。

問題のフィードバックリンク

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

[パフォーマンス] パネルで負荷パフォーマンスを分析する場合、[フレーム] セクションで、ドロップされたフレームが赤色でマークされるようになりました。カーソルを合わせるとフレームレートが表示されます。

ドロップされたフレーム

Chromium の問題: 1075865

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

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

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

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

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

デュアルスクリーンのエミュレーション

Chromium の問題: 1054281

試験運用版の機能

Puppeteer レコーダーでブラウザのテストを自動化する

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

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

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

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

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

人形劇のレコーダー

Chromium の問題: 1144127

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

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

ポップオーバーにより、直感的な一連の入力タイプでタイポグラフィを動的に操作するためのクリーンな UI が提供されます。

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

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）

Advanced Perceptual Contrast Algorithm（APCA）は、カラー選択ツールの AA/AAA ガイドラインのコントラスト比に代わるものです。

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

カラー選択ツールでの APCA

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

Chromium の問題: 1121900

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

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

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

投稿内の新機能や変更点、または DevTools に関するその他の事項について議論するには、以下のオプションを使用します。

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