DevTools の新機能（Chrome 120）

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

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

[サードパーティ Cookie の問題を含める] チェックボックスがすべての Chrome ユーザーに対してデフォルトで有効になりました。これにより、[問題] タブに、サードパーティ 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 を開き、[Privacy Sandbox] パネルに移動します。このパネルは、上部の プルダウン ボタンの後ろに隠れている場合があります。
4. [Cookie] セクションを開き、[Analyze this tab] をクリックします。ツールで Cookie が検出されなかった場合は、ページを再読み込みしてみてください。

Privacy Sandbox Analysis Tool（PSAT）の使用方法について詳しくは、以下をご覧ください。

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

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

無視リストの改善

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

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

Chromium の問題: 1496301。

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

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

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

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

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

非同期呼び出しでキャッチされた例外やキャッチされていない例外（チェックされている場合）の実行を一時停止するために、Debugger は 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。

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

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

Chromium の問題: 1424714

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

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

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

Chromium の問題: 1492460、1489721。

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

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

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

Chromium の問題: 345205。

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

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

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）。
• 非推奨:
  • [色の形式] 設定は以前のバージョンでは無効になっており、このたび削除されました。
  • [Sources] の [Delete all override] オプションは、オーバーライドの合理化後、使用率が低いため削除されました（1473681）。

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

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

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

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

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

DevTools の新機能

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