DevTools の新機能（Chrome 120）

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

サイトでサードパーティ Cookie を使用している場合は、Google でのサポート終了が近づいているため対応が必要です。影響を受ける 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] セクションを開き、[このタブを分析] をクリックします。ツールで Cookie が見つからなかった場合は、ページを再読み込みしてみてください。

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

• PSAT のハウツー。
• 非推奨が有効になったときに何が起こるかを予測するには、評価環境を設定します。
• 影響を受ける側面を特定するには、一般的な分析アクションをご覧ください。
• 分析、e コマース、SSO サービス、埋め込みコンテンツなど、一般的なシナリオを分析する方法については、分析シナリオのデモ例をご覧ください。

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

無視リストの拡張

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

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

Chromium の問題: 1496301。

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

[キャッチされた例外で一時停止] をオンにしてコードをデバッグすると、デバッガは、同期と非同期の両方で、キャッチされた次の例外で実行を停止するようになりました。

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

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

1. DevTools > [Sources] を開き、hidden フォルダを無視リストに追加して、 [Pause on caught exceptions] をオンにします。
2. このページの [Caught] のシナリオのリストで、さまざまなボタンをクリックすると、前述のケースで実行が一時停止されます。

非同期呼び出しでキャッチされた例外またはキャッチされなかった例外（チェックされている場合）で実行を一時停止するために、デバッガは Promise 全体で拒否ハンドラを探します。このバージョン以降、デバッガは、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 が表示されるようになりました。

Chromium の問題: 1376976。

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

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

Chromium の問題: 1424714。

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

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

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

Chromium の問題: 1492460、1489721。

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

コードを貼り付けるときに Self-XSS に関する警告を表示する 試験運用版がデフォルトで有効になりました。セルフ XSS（セルフ クロスサイト スクリプティング）は、悪意のあるコードを DevTools に貼り付けるようユーザーをだまして、攻撃者がウェブ アカウントや個人情報を制御できるようにする攻撃です。

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

Chromium の問題: 345205。

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

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

Chromium の問題: 1445175。

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

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

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

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）。
• アプリ > バックグラウンド サービス: サイズ変更時に上部のアクション バーでテキストが折り返されるようになりました（1487276）。
• [要素] > [スタイル]:
  • スロット付き要素の継承された CSS 変数の解決を修正しました（1492162）。
  • CSS プロパティを無効にする際に、構文の破損を修正するためにコメントが削除されるようになりました（1101224）。
• ネットワーク: [優先度] 列に、初期優先度に関する情報を含むツールチップが表示されるようになりました（[大きなリクエストの行] がオンになっている場合も同様です）（1495735）。
• 非推奨:
  • 以前のバージョンでは [色の形式] 設定が無効になっていましたが、今回のバージョンでは削除されました。
  • オーバーライドの合理化（1473681）後、使用率が低いため、[ソース] の [すべてのオーバーライドを削除] オプションが削除されました。

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

• フィードバックや機能リクエストは、crbug.com からお送りください。
• DevTools の more_vert その他のオプション > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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