DevTools の新機能（Chrome 127）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

[ソース] パネルの改善

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

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

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

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

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

Chromium の問題: 40924349。

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

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

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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