DevTools の新機能（Chrome 127）

Sofia Emelianova
Sofia Emelianova
GitHub

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

明示的アンカーと暗黙的アンカーのリンク前とリンク後。

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

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

[ソース] パネルの改善

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

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

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

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

ワークフローの動作を確認する:

Chromium の問題: 40924349。

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

[ソース] > [イベント リスナーのブレークポイント] > [コントロール] リストに、scroll-snap 関連のリスナー scrollsnapchange と scrollsnapchanging が追加されます。これらのイベントは、スクロール コンテナを新しい要素にスナップさせるようにスクロールしたときに発生します。

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

Chromium の問題: 40286359。

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

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

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

[ネットワーク] パネルのスロットリング プリセットが更新されました。新しい [高速 4G]、[高速 3G] の名前が [低速 4G] に変更、[低速 3G] の名前が [3G] に変更されました。これにより、Lighthouse のプリセットとの整合性が高まります。

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

Chromium の問題: 342406608。

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

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

...
"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）。
  • メモリ: ヒープ スナップショットの [概要] から不要なサイズ 0 の InternalNodes を削除しました（340200025）。
  • ネットワーク: responseReceived イベントをまだ取得していないリクエストについて、ストリーミング レスポンス コンテンツのプレビューが開始されないバグを修正しました（338340752）。
  • パフォーマンス:
    • セレクタの統計情報: %-of-Slow-Path-Non-Matches 列の説明ツールチップを追加しました（324282954）。
    • トラックの構成モード: [トラックの構成を完了] ボタンが右下（345256274）に移動しました。
  • コンソール: 前後キャッシュを使用して移動したときに、同じコンソール メッセージが複数表示されるバグを修正しました（40894153）。
  • 設定: すべてのタブの横にヘルパー アイコンを追加しました。

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

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

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

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

DevTools の新機能

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