DevTools の新機能(Chrome 89)

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

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

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

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

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

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

Chromium の問題: 1142804

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

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

Chromium の問題: 1150883

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

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

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

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

Chromium の問題: 1003629

ネットワーク リクエスト用の新しい [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 カテゴリが大幅に変化しました。
  • Installable グループでは、Chrome のインストール可能な条件を有効にする機能チェックが全面的に強化されました。これらは、[Manifest] ペインに表示されるのと同じシグナルです。

    • 「Registers a Service Worker...」の監査が PWA Optimized グループに移行され、「Uses HTTPS」監査が主要な「インストール要件」の監査に含まれるようになりました。
    • 高速で信頼性の高い」グループが削除されます。改善された「インストール要件」監査にオフライン機能チェックが含まれるため、「オフライン時に現在のページと start_url が 200 で応答する」監査が削除されました。「モバイル ネットワークでページの読み込みが速い」の監査も削除されました。

Chromium の問題: 772558

[要素] パネルの更新

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

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

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

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

実行時に CSS の `:target` 状態を強制的に

Chromium の問題: 1156628

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

新しい [要素を複製] のショートカットを使用すると、要素をすばやく作成できます。

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

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

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

要素が重複しています

Chromium に関する問題: 11507971150797

カスタム 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 client Hints] セクションを開いて、クライアント ヒントを編集します。

User-Agent Client Hints の編集

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

Chromium の問題: 1073909

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

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

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

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

Chromium の問題: 1122580

[Network] パネルで WebTransport 接続を表示する

[Network] パネルに WebTransport 接続が表示されるようになりました。

WebTransport 接続

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

Chromium の問題: 1152290

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

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

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

Chromium の問題: 1028078

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

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

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

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

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

Chromium に関する問題: 11498591148353

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

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

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

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

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

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

Chromium の問題: 1155120

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

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

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

[アプリケーション] パネルで、Service Worker が表示されているフレームを展開し、[Service Workers] ツリーから Service Worker を選択して詳細を表示します。

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

Chromium の問題: 1122507

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

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

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

メモリを測定する

Chromium の問題: 1139899

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

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

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

パフォーマンス パネルでフレーム落ち

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

ドロップされたフレーム

Chromium の問題: 1075865

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

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

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

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

なお、この試験運用は初期段階の試験運用です。今後、レコーダー機能を改善および拡張していく予定です。

人形劇のレコーダー

Chromium の問題: 1144127

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

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

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

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

Chromium の問題: 1093229

CSS Flexbox デバッグツール

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

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

Flexbox

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 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