DevTools の新機能（Chrome 127）

Sofia Emelianova
Sofia Emelianova
GitHub

アンカーの配置機能のデバッグを容易にするため、[スタイル] タブで、明示的なアンカー識別子と暗黙的なアンカーがノードにリンクされるようになりました。

明示的なアンカーと暗黙的なアンカーをリンクする前と後。

また、popovertarget 属性値が DOM の popover 要素にリンクされるようになりました。

popovertarget を popover 要素にリンクする前と後。

[Sources] パネルの改善

このバージョンでは、[Sources] パネルにいくつかの改善が加えられています。

「ここで一時停止しない」を強化

[Never Pause Here] オプションを使用すると、デバッガが同じ行で何度も一時停止しないようにできます。これにより、繰り返し発生する無関係なブレークポイントを簡単に処理できます。このバージョンでは、この機能が強化され、次の対象にも適用されるようになりました。

  • 組み込み関数からの例外または Promise の拒否。
  • DOM、フェッチ/XHR、CSP 違反のブレークポイントを「キャンセル」する。
  • Wasm 逆アセンブリ。

ワークフローを見る:

Chromium の問題: 40924349。

新しいスクロール スナップ イベント リスナー

[Sources] > [Event Listener Breakpoints] > [Control] リストに、スクロール スナップに関連する 2 つのイベント リスナー（scrollsnapchange と scrollsnapchanging）が追加されました。これらのイベントは、スクロール コンテナをスクロールして新しい要素にスナップするときに発生します。

スクロール スナップ関連のイベント リスナーを追加する前と後。

Chromium の問題: 40286359。

ネットワーク パネルの改善

このバージョンでは、[ネットワーク] パネルにいくつかの改善が加えられています。

ネットワーク スロットリング プリセットの更新

[ネットワーク] パネルのスロットリング プリセットが更新されました。新しい [高速 4G]、[高速 3G] の名前が [低速 4G] に変更され、[低速 3G] の名前が [3G] に変更されました。これは、Lighthouse のプリセットに沿ったものです。

ネットワーク スロットリング プリセットの更新前と更新後。

Chromium の問題: 342406608。

HAR 形式のカスタム フィールド内の Service Worker 情報

ネットワーク ログを HAR 形式でエクスポートすると、タイミングなどの Service Worker 関連の情報をカスタム フィールド（先頭にアンダースコアが付いたフィールド）として確認できるようになりました。たとえば、ログに次の新しいフィールドが表示されることがあります。

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

Chromium の問題: 342406608。

[パフォーマンス] パネルでの WebSocket イベントの送受信

他の WebSocket イベントと同様に、[パフォーマンス] パネルで WebSocket メッセージの送信イベントと WebSocket メッセージの受信イベントがキャプチャされ、パフォーマンス トレースに表示されるようになりました。次に例を示します。

パフォーマンス トレースでキャプチャされた「WebSocket メッセージの受信」イベント。

Chromium の問題: 40286129。

その他のハイライト

このリリースにおける主な修正と改善点は次のとおりです。

  • ユーザー補助: 上下の矢印キーでログをスクロールすると、スクリーン リーダーがコンソール内のメッセージの内容を読み上げるようになりました（344484979）。
  • 出典:
    • ページ: [名前を付けて保存] メニュー オプションで、Wasm モジュール ファイルが Base64 テキストではなく有効な Wasm バイナリとして保存されるようになりました（40784130）。
    • コールスタック: 非同期コールフレームの説明から (async) サフィックスを削除し、ハイライトを斜体から太字に変更しました（343750870）。
  • メモリ: ヒープ スナップショットの概要から、不要なサイズゼロの InternalNodes を削除しました（340200025）。
  • ネットワーク: 開始されたばかりで responseReceived イベントをまだ受信していないリクエストのストリーミング レスポンス コンテンツをプレビューできないバグを修正しました（338340752）。
  • パフォーマンス:
    • セレクタの統計情報: %-of-Slow-Path-Non-Matches 列に説明のツールチップを追加しました（324282954）。
    • トラック構成モード: [トラックの構成を終了] ボタンが右下に移動しました（345256274）。
  • コンソール: バックフォワード キャッシュを使用して移動すると、同じコンソール メッセージが複数表示されるバグを修正しました（40894153）。
  • 設定: すべてのタブの横にヘルパー アイコンを追加しました。

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

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

Chrome DevTools チームに問い合わせる

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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