DevTools の新機能（Chrome 120）

Sofia Emelianova
Sofia Emelianova
GitHub

サードパーティ 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 を分析する方法

  1. Chrome に拡張機能をインストールします。
  2. 最適な分析を行うために、ウェブサイトを 1 つのタブで開きます。
  3. DevTools を開き、[Privacy Sandbox] パネルに移動します。このパネルは、上部の その他のタブ。 プルダウン ボタンの後ろに隠れている場合があります。
  4. [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 は、キャッチされた次の例外（同期と非同期の両方）で実行を停止するようになりました。

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

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

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

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

非同期呼び出しでキャッチされた例外やキャッチされていない例外（チェックされている場合）の実行を一時停止するために、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] のダイアログとコンソールの自己 XSS 警告

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

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

「Do you trust this code?」という[Sources] にコードを貼り付ける際のダイアログ。

Chromium の問題: 345205

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

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

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

Chromium の問題: 1445175

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

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

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

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

Chromium の問題: 1448214

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

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

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

Chromium の問題: 1478888。

Lighthouse 11.2.0

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

このアップデートでは、パフォーマンス カテゴリが全面的に見直されています。パフォーマンス分析情報は、パフォーマンス指標に見込まれる効果に基づいてスコアリングされ、優先順位が付けられるようになりました。また、パフォーマンス スコアゲージには、各指標がスコアに及ぼす影響に関する詳細情報も含まれます。

パフォーマンスの見直し前と変更後

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

Chromium の問題: 772558。

ユーザー補助機能の改善

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

  • スクリーン リーダーで、[ソース] >ブレークポイント。
  • キーボードで [このような問題を非表示] プルダウン メニューにアクセスできるようになりました。

Chromium の問題: 1488645、1484918。

その他のハイライト

このリリースにおける注目すべき修正と改善は次のとおりです。

  • パフォーマンス: 録画で LCP インジケーターが欠落することがある問題を修正しました（1487136）。
  • 投機的読み込み: [ネットワーク] パネルのプルダウン メニューにあるターゲットの完全な URL を修正しました（1471020）。
  • 対象範囲: <ph type="x-smartling-placeholder">
      </ph>
    • プリティ プリントされたコードの行ごとのカバレッジを修正しました（1464974）。
    • ページの再読み込み時にカバレッジ情報が更新されるようになりました（1494457）。
  • コンソール: <ph type="x-smartling-placeholder">
      </ph>
    • メッセージでのテキスト選択部分を修正しました（1487449）。
    • 予測入力のプルダウンのちらつきを修正しました（1487453）。
    • スタックパスでサポートされているかっことスタック トレースの URL（1473926）。
  • ソース: TypeScript の using キーワードの構文のハイライト表示をサポートします（1490515）。
  • [クイック開く] メニューにプライベート メソッドが表示されるようになりました（1492957）。
  • アプリケーション >バックグラウンド サービス: サイズ変更時に上部のアクションバーでテキストを折り返すようになりました（1487276）。
  • 要素 >スタイル: <ph type="x-smartling-placeholder">
      </ph>
    • スロットされた要素の継承された CSS 変数の解像度を修正しました（1492162）。
    • CSS プロパティを無効にすると、構文の破損を修正するためにそのコメントが削除されるようになりました（1101224）。
  • ネットワーク: [優先度] 列に、初期優先度に関する情報を含むツールチップが表示されるようになりました（[大きなリクエストの行] がオンになっている場合に表示されます）（1495735）。
  • 非推奨: <ph type="x-smartling-placeholder">
      </ph>
    • [カラー形式] の設定は以前のバージョンでは無効になっていたため、削除されました。
    • [Sources] の [Delete all override] オプションは、オーバーライドの合理化後、使用率が低いため削除されました（1473681）。

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。