DevTools の新機能（Chrome 120）

Sofia Emelianova
Sofia Emelianova
GitHub

サードパーティ Cookie の段階的廃止

お客様のサイトではサードパーティ Cookie が使用されている可能性があります。Google でのサポート終了が近づいているため、対応が必要です。影響を受ける Cookie についてどうすればよいかについては、サードパーティ Cookie のサポート終了に備えるをご覧ください。

チェックボックス。 [サードパーティ Cookie の問題を含める] チェックボックスがすべての Chrome ユーザーに対してデフォルトで有効になりました。これにより、[問題] タブに、サードパーティ Cookie の廃止と段階的な廃止の影響を受ける Cookie に関する警告が表示されるようになりました。チェックボックスをオフにすると、これらの問題が表示されなくなります。

[問題] タブに、サードパーティ Cookie のサポート終了に関する警告が表示されます。

Chromium の問題: 1466310。

Privacy Sandbox Analysis Tool でウェブサイトの Cookie を分析する

DevTools 用の Privacy Sandbox Analysis Tool 拡張機能は現在開発中であり、最新のプレビュー リリース バージョン 0.3.2 が提供されています。このツールを使用すると、ウェブサイトが Cookie を使用する方法を把握し、プライバシー保護を重視した新しい Chrome API に関するガイダンスを入手できます。

Cookie を分析する手順は次のとおりです。

  1. Chrome に拡張機能をインストールします。
  2. ウェブサイトを 1 つのタブで開いて、最適な分析を行う。
  3. DevTools を開くと、[プライバシー サンドボックス] パネルが表示されます。このパネルは、上部にある その他のタブ。 プルダウン ボタンの背後に隠れている場合があります。
  4. [Cookie] セクションを開き、[Analyze this tab] をクリックします。ツールで Cookie が検出されなかった場合は、ページを再読み込みしてみてください。

Privacy Sandbox Analysis Tool。

プライバシー サンドボックス分析ツール（PSAT）の使用方法について詳しくは、以下をご覧ください。

  • PSAT の使い方。
  • 非推奨が有効になった場合に発生する可能性のある問題を予測するには、評価環境を設定します。
  • 影響を受ける要素を特定するには、一般的な分析アクションをご覧ください。
  • 分析、e コマース、SSO サービス、埋め込みコンテンツなどの一般的なシナリオを分析する方法については、分析シナリオのデモ例をご覧ください。

また、問題の報告に関するガイダンスもご覧ください。

拡張無視リスト

node_modules のデフォルトの除外パターン

このバージョンでは、設定] をタップします。 の [設定] > [無視リスト] で、デフォルトの正規表現をカスタム除外ルールとして有効にできます。コードのみに集中できるように、デバッガはデフォルトで /node_modules/ と /bower_components/ のスクリプトをスキップするようになりました。このルールは [設定] でいつでも無効にできます。

正規表現を追加する前と後。

Chromium の問題: 1496301。

例外が捕捉された場合、または無視されないコードを通過した場合に、例外が実行を停止するようになりました

チェックボックス。 [捕捉された例外で停止] をオンにしてコードをデバッグすると、デバッガは、捕捉された次の例外（同期と非同期の両方）で実行を停止するようになりました。

  • 呼び出しスタック内の無視されないフレームでキャッチされた例外。
  • コールスタックで無視されないフレームを通過する例外をキャッチします。たとえば、次のスクリーンショットをご覧ください。

無視されないコードを通過した捕捉された例外で一時停止します。

この動作をテストするには、こちらのデモページを開きます。

  1. DevTools > [ソース] を開き、hidden フォルダを無視リストに追加し、チェックボックス。 [捕捉された例外で停止] をオンにします。
  2. ページの [Caught] リストで、さまざまなボタンをクリックして、該当するケースで実行が停止されたことを確認します。

非同期呼び出しでキャッチされた例外やキャッチされていない例外（チェックされている場合）で実行を一時停止するため、デバッガはプロミス全体で拒否ハンドラを探します。このバージョン以降、デバッガは、try...finally ブロックが例外をキャッチしないように、Promise.finally() が例外をキャッチすることを予測しなくなりました。

Chromium の問題: 1489312、1291064。

ソースマップ内の x_google_ignoreList の名前を ignoreList に変更しました

ソースマップ仕様では、x_google_ignoreList の代わりに ignoreList フィールドが採用されました。DevTools では、古い名前のフォールバックを使用して新しい名前がサポートされるようになりました。フレームワークとバンドラで新しいフィールド名を使用できるようになりました。

ソースマップを使用すると、ウェブサイトから提供される圧縮されたコードではなく、作成したコードをデバッグできます。

ソースマップの詳細については、以下をご覧ください。

リモート デバッグ中の新しい入力モード切り替え

Chrome タブをリモートでデバッグする際に、タッチ入力とマウス入力を切り替えられるようになりました。たとえば、--remote-debugging-port=<port> を使用して Chrome インスタンスを実行し、chrome://inspect/#devices 経由でこのネットワーク ターゲットに接続する場合です。

入力モードの切り替えの動作を動画で確認する

Chromium の問題: 1410433。

[要素] パネルに #document ノードの URL が表示されるようになりました

iframe のデバッグが容易になるよう、[要素] パネルの #document ノードに documentURL が表示されるようになりました。

前後を比較すると、#document ノードの横に documentURL が表示されています。

Chromium の問題: 1376976。

[アプリケーション] パネルの有効なコンテンツ セキュリティ ポリシー

検査したフレームのコンテンツ セキュリティ ポリシー（CSP）の詳細を表示できるようになりました。詳細を表示するには、[アプリケーション] > [フレーム] に移動し、フレームを選択して [Content Security Policy（CSP）] セクションまで下にスクロールします。

[アプリケーション] タブの [コンテンツ セキュリティ ポリシー] セクション。

Chromium の問題: 1424714。

アニメーションのデバッグを改善しました

[アニメーション] タブで、次のことができるようになりました。

  • タイムラインのヘッダーの任意の場所をクリックして、プレイヘッドを設定します。アニメーションがすでに再生中の場合は再生が続行され、それ以外の場合は停止します。以前は、ドラッグする必要がありました。
  • 名前列のサイズを変更して、アニメーション名全体を表示します。

Chromium の問題: 1492460、1489721。

ソースの [このコードを信頼しますか？] ダイアログとコンソールの自己 XSS 警告

チェックボックス。 [コードを貼り付けるときに自己 XSS に関する警告を表示] テストがデフォルトで有効になりました。セルフ XSS（セルフ クロスサイト スクリプティング）は、ユーザーをだまして DevTools に悪意のあるコードを貼り付けさせ、攻撃者がウェブ アカウントと個人情報を不正に取得する攻撃です。

DevTools を初めて使用するユーザーがコードを貼り付けようとすると、[ソース] パネルに [このコードを信頼しますか？] ダイアログが表示され、[コンソール] にも同様の警告が表示されます。理解し、自分で確認したコードのみを貼り付けてください。貼り付けるには、プロンプトが表示されたら「allow pasting」と入力します。貼り付けを許可すると、警告は二度と表示されなくなります。

ソースにコードを貼り付けるときに表示される「このコードを信頼しますか？」ダイアログ。

Chromium の問題: 345205。

ウェブワーカーとワークレットのイベント リスナー ブレークポイント

[ソース] > [イベント リスナーのブレークポイント] でイベント ブレークポイントを設定すると、ウェブサイトでこのイベントで停止するだけでなく、ウェブワーカーまたは任意のタイプのワークレット（共有ストレージ ワークレットを含む）で対応するイベントが発生したときにも、デバッガが停止するようになりました。

Service Worker が set timeout 関数を呼び出したときに、デバッガが一時停止しました。

Chromium の問題: 1445175。

<audio> と <video> の新しいメディアバッジ

[要素] パネルで、<audio> 要素と <video> 要素の新しいメディアバッジを有効にできるようになりました。バッジをクリックすると、メディアパネルが表示され、これらの要素をデバッグできます。

音声タグと動画タグ用の新しいメディアバッジが有効になりました。

この機能は現在開発中であり、今後さらに改善される予定です。この改善を実現した Junseo（Jeremy）Yoo 様に、DevTools チームより感謝の意を表します。

Chromium の問題: 1448214。

プリロードの名前を投機的読み込みに変更

以前の用語の使いすぎを避け、動作をより正確に反映するため、[アプリケーション] > [プリロード] の名前を [推測読み込み] に変更しました。推測読み込みでは、ウェブサイトに定義できる推測ルールに基づいて、アクセスされる可能性が高いページのほとんどを事前レンダリングしてプリフェッチすることで、ほぼ瞬時にページを読み込むことができます。

プリロードの名前を投機的読み込みに変更する前と後。

Chromium の問題: 1478888。

Lighthouse 11.2.0

[Lighthouse] パネルで Lighthouse 11.2.0 が実行されるようになりました。変更点の詳細なリストをご覧ください。

今回のアップデートでは、パフォーマンス カテゴリが全面的に改良されています。パフォーマンス分析情報のスコアと優先度は、パフォーマンス指標への推定影響に基づいて算出されるようになりました。また、パフォーマンス スコアゲージには、各指標がスコアに与える影響に関する詳細情報が含まれています。

パフォーマンスの大幅な改善前と後

DevTools の Lighthouse パネルの基本的な使用方法については、Lighthouse: ウェブサイトの速度を最適化するをご覧ください。

Chromium の問題: 772558。

ユーザー補助機能の改善

このバージョンでは、ユーザー補助機能が次のように改善されています。

  • スクリーン リーダーは、[ソース] > [ブレークポイント] でチェックボックスのステータス（オンまたはオフ）を読み上げるようになりました。
  • キーボードを使用して [類似の問題を非表示] プルダウン メニューにアクセスできるようになりました。

Chromium の問題: 1488645、1484918。

その他のハイライト

このリリースの主な修正と改善点は次のとおりです。

  • パフォーマンス: 録画中に LCP インジケーターが表示されないことがある問題を修正しました。（1487136）
  • 推測読み込み: [ネットワーク] パネルのプルダウン メニューで、ターゲットの完全な URL を修正しました（1471020）。
  • 対象:
    • 美しく表示されたコードの行単位のカバレッジを修正しました（1464974）。
    • ページの再読み込み時にカバレッジ情報が更新されるようになりました（1494457）。
  • コンソール:
    • メッセージ内のテキストの部分選択を修正しました（1487449）。
    • オートコンプリート プルダウンのちらつきを修正しました。（1487453）
    • スタックパスとスタックトレース内の URL でサポートされるかっこ（1473926）。
  • ソース: TypeScript using キーワードの構文ハイライト表示をサポートしました（1490515）。
  • [クイック開く] メニューに非公開メソッドが表示されるようになりました（1492957）。
  • Application > Background services: サイズ変更時に上部アクション バーでテキストが折り返されるようになりました（1487276）。
  • [要素] > [スタイル]:
    • スロット要素の継承された CSS 変数の解決を修正しました。（1492162）
    • CSS プロパティを無効にするときに、構文の切れ目が修正されるようコメントが削除されるようになりました（1101224）。
  • ネットワーク: [優先度] 列に、初期優先度に関する情報を含むツールチップが表示されるようになりました（[大きなリクエスト行] チェックボックスがオンの場合も同様です）（1495735）。
  • 非推奨:
    • [色の形式] 設定は以前のバージョンでは無効になっており、このたび削除されました。
    • オーバーライドの効率化後、使用率が低いため、[ソース] の [すべてのオーバーライドを削除] オプションが削除されました（1473681）。

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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