DevTools の新機能（Chrome 120）

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

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

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

Chromium の問題: 1466310。

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

DevTools 用の プライバシー サンドボックス分析ツール拡張機能は現在開発中であり、最新のプレビュー リリース バージョン 0.3.2 が提供されています。このツールを使用すると、ウェブサイトで Cookie がどのように使用されているかを把握し、新しいプライバシー保護の Chrome API に関するガイダンスを入手できます。

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

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

プライバシー サンドボックス分析ツール（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 が表示されるようになりました。

Chromium の問題: 1376976。

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

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

Chromium の問題: 1424714。

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

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

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

Chromium の問題: 1492460、1489721。

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

[コードを貼り付けるときにセルフ 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）。
• Application > Background services: サイズ変更時に上部アクションバーでテキストが折り返されるようになりました（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 の新機能シリーズで取り上げられたすべての内容のリスト。