DevTools の新機能（Chrome 127）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

popovertarget をポップオーバー要素にリンクする前と後。

[ソース] パネルの改善

このバージョンでは、[ソース] パネルが改善されています。

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

[ここで一時停止しない] オプションを使用すると、デバッガが同じ行で何度も一時停止するのを防ぐことができます。これにより、繰り返し発生する無関係なブレークポイントの処理が容易になります。このバージョンではこの機能が強化され、以下の場合に使用できるようになりました。

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

実際のワークフローをご覧ください。

Chromium の問題: 40924349。

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

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

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

Chromium の問題: 40286359。

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

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

ネットワーク スロットリング プリセットを更新しました

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

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

Chromium の問題: 342406608。

HAR 形式のカスタム フィールド内のサービス ワーカー情報

ネットワーク ログを 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 メッセージの受信イベントがキャプチャされ、パフォーマンス トレース内に表示されるようになります。例:

パフォーマンス トレースでキャプチャされた「Receive WebSocket Message」イベント。

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 の新機能」シリーズで紹介されているすべてのリスト。