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

DevTools の新機能（Chrome 120）

Sofia Emelianova

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

サイトでサードパーティ Cookie が使用されている可能性があるため、Google でのサポート終了が近づいているため対応が必要です。影響を受ける Cookie への対処方法については、サードパーティ Cookie のサポート終了に備えるをご覧ください。

[サードパーティの Cookie の問題を含める] チェックボックスはすべての Chrome ユーザーに対してデフォルトでオンになっています。そのため、[問題] タブに、サードパーティ Cookie の今後のサポート終了と段階的廃止の影響を受ける Cookie についての警告が表示されるようになりました。このチェックボックスはいつでもオフにして、これらの問題が表示されないようにすることができます。

[問題] タブに表示される、まもなくサードパーティ Cookie のサポート終了に関する警告。

Chromium の問題: 1466310。

プライバシーサンドボックス分析ツールでウェブサイトの Cookie を分析する

DevTools のプライバシーサンドボックス分析ツール拡張機能は、最新のプレリリースバージョン 0.3.2 で積極的に開発中です。このツールを使用すると、ウェブサイトでの Cookie の使用方法を把握し、新しいプライバシー保護 Chrome API についてのガイダンスを得ることができます。

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

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

プライバシーサンドボックス分析ツール。

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

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

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

無視リストの拡張

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

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

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

Chromium の問題: 1496301

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

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

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

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

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

[DevTools] > [Sources] を開き、hidden フォルダを無視リストに追加して、 [Pause on c ヘルプセンター記事] をオンにします。
ページの [Cought] シナリオのリストにあるさまざまなボタンをクリックして、上記のケースで一時停止されている実行を確認します。

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

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

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

[Application] タブの [Content Security Policy] セクション。

Chromium の問題: 1424714。

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

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

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

Chromium の問題: 1492460、1489721。

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

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

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

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

Chromium の問題: 345205

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

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

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

Chromium の問題: 1445175。

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

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

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

Chromium の問題: 1448214

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

これまでの用語を過剰に使用せず、動作をより正確に反映するために、[Application] > [Preloading] を [投機的読み込み] に名称変更しました。投機的読み込みでは、ウェブサイトで定義できる投機ルールに基づいて、ほぼ瞬時にページを読み込め、よく閲覧されたページを事前レンダリングしてプリフェッチできます。

プリロードを投機的読み込みに名前を変更する前と後。

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）
ネットワーク: [優先度] 列に、初期優先度に関する情報のツールチップが表示されるようになりました（[Big request rows] がオンの場合も同様です）（1495735）。
非推奨:
- [カラー形式] の設定は以前のバージョンでは無効になっており、現在は削除されています。
- オーバーライドの合理化後、使用率が低いため、[ソース] の [オーバーライドをすべて削除] オプションを削除しました（1473681）。

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

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

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

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

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