このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 127）

Sofia Emelianova

[要素] パネルで CSS アンカーの位置を調査する

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

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

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

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

Chromium の問題: 289900232、330306231。

ソースパネルの改善

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

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

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

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

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

Chromium の問題: 40924349。

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

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

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。