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 を分析する手順は次のとおりです。

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

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

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

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

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

無視リストの拡張

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

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

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

Chromium の問題: 1496301

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

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

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

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

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

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

非同期呼び出しでキャッチされた例外またはキャッチされなかった例外(オンになっている場合)の実行を一時停止するために、Debugger は Promise 全体で拒否ハンドラを探します。このバージョン以降、Debugger は、try...finally ブロックが例外をキャッチしないのと同様に、Promise.finally() が例外をキャッチすると予測しなくなります。

Chromium に関する問題: 14893121291064

ソースマップで 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 の問題: 14924601489721

[ソース] の [このコードを信頼しますか?] ダイアログとコンソールのセルフ 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 の問題: 14886451484918

その他のハイライト

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

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

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

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

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

DevTools の新機能

DevTools の新機能シリーズで取り上げたすべての内容の一覧。

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 はキャンセルされました

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59