このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 120）

Sofia Emelianova

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

サイトでサードパーティ Cookie が使用されている可能性があります。Google では、この Cookie のサポート終了が近づいているため、適切な対応が必要です。影響を受ける 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 を分析する方法

Chrome に拡張機能をインストールします。
最適な分析を行うために、ウェブサイトを 1 つのタブで開きます。
DevTools を開き、[Privacy Sandbox] パネルに移動します。このパネルは、上部のプルダウンボタンの後ろに隠れている場合があります。
[Cookies] セクションを開き、[Analyze this tab] をクリックします。ツールで Cookie が見つからなかった場合は、ページを再読み込みしてみてください。

Privacy Sandbox Analysis Tool。

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

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

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

無視リストの拡張

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

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

正規表現の追加前と追加後。

Chromium の問題: 1496301。

例外がキャッチされた場合、または無視されないコードを渡すと実行を停止する

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

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

無視されないコードを介して、キャッチされた例外で一時停止します。

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

[DevTools] > [Sources] を開き、hidden フォルダを無視リストに追加して、 [Pause on cated exception] をオンにします。
ページの「捕捉」したシナリオのリストで、各ボタンをクリックし、前述のケースの実行が一時停止されていることを確認します。

非同期呼び出しでキャッチされた例外やキャッチされていない例外（チェックされている場合）の実行を一時停止するために、Debugger は Promise 全体で拒否ハンドラを探します。このバージョン以降、Debugger は、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）の詳細を確認できるようになりました。詳細を表示するには、[Application] > [Frames] に移動し、フレームを選択して [Content Security Policy (CSP)] セクションまで下にスクロールします。

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

Chromium の問題: 1424714

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

[アニメーション] タブでは、次のことができます。

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

Chromium の問題: 1492460、1489721。

[Sources] の [Do you trust this code?] ダイアログと Console の自己 XSS 警告

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

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

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

Chromium の問題: 345205

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

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

Service Worker が設定したタイムアウト関数を呼び出すと、デバッガが一時停止します。

Chromium の問題: 1445175

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

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

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

Chromium の問題: 1448214

プリロードの名前を「投機的読み込み」に変更しました

前の用語を多用するのを避け、動作をより正確に反映するため、[Application] > [Preloading] の名前が [Speculative load] に変更されました。投機的読み込みでは、ウェブサイト用に定義できる投機ルールに基づいて、ほぼ瞬時にページを読み込むことができ、誘導されるページのほとんどを事前レンダリングおよびプリフェッチできます。

投機的読み込みへのプリロードの名前変更前と変更後。

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 options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。