DevTools の新機能（Chrome 127）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

ソースパネルの改善

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

「ここは一時停止しない」の強化

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

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

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

Chromium の問題: 40924349。

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

出典 >イベント リスナー ブレークポイント >Control list は 2 つの scroll-snap 関連のリスナー（scrollsnapchange と scrollsnapchanging）を取得します。これらのイベントは、新しい要素にスナップするようにスクロール コンテナをスクロールすると発生します。

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

Chromium の問題: 40286359

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

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

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

[Network] パネルのスロットリング プリセットが更新され、[Fast 4G] が新しい [Fast 3G] から [Slow 4G] に、[Slow 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 メッセージを受信] イベントがキャプチャされ、パフォーマンス トレースに表示されるようになりました。例:

「Receive WebSocket Message」イベントを記録します。

Chromium の問題: 40286129

その他のハイライト

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

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

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

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

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

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

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

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。