DevTools の新機能（Chrome 123）

Sofia Emelianova
Sofia Emelianova
GitHub

イースター エッグを探す

今年のエイプリルフールを祝うため、DevTools チームは DevTools のどこかにイースター エッグを隠しました。

カラフルな 💫? 絵文字を探してください。

[要素] パネルの更新

このバージョンでは、[要素] パネルがいくつか更新されています。

[要素] > [スタイル] でフォーカスのあるページをエミュレートする

[要素] > [スタイル] タブに、[要素の状態を切り替え]（:hov）ボタンの下に [フォーカスされたページをエミュレート] オプションが追加されました。これまで、このオプションは [レンダリング] パネルでのみ確認できました。

ページから DevTools にフォーカスを切り替えると、フォーカスによってトリガーされたオーバーレイ要素の一部は自動的に非表示になります。たとえば、プルダウン リスト、メニュー、日付選択ツールなどです。[フォーカスのあるページをエミュレート] オプションを使用すると、そのような要素をフォーカスがあるようにデバッグできます。

[スタイル] タブでフォーカスされたページをエミュレートする前と後。

Chromium の問題: 1468393。

var() フォールバックでのカラー選択ツール、角度時計、イージング エディタ

CSS の編集を簡素化するため、[要素] > [スタイル] タブで、var() フォールバックにカラー選択ツール、角度時計、イージング エディタを使用できるようになりました。

var() フォールバックでの、カラー選択ツール、角度時計ツール、イージング エディタ ツールのレンダリング前とレンダリング後。

Chromium の問題: 1520417。

CSS 長さツールのサポート終了

CSS 長さ作成ツールは、ワークフローの速度が低下し、あまり価値がないというフィードバックが寄せられたため、非推奨になりました。

ドラッグして値を調整したり、プルダウン メニューから単位の種類を選択したりすることはできなくなります。代わりに、値をダブルクリックして新しい値を入力します。

長さツールを再度有効にするには、 [設定] > [試験運用版] > [スタイル] タブの [CSS <length> 作成ツールのサポート終了]をオフにします。

それでもこのツールをご希望の場合は、DevTools チームにご意見をお寄せください。また、長さツールがワークフローにどのように役立っているかもお聞かせください。フィードバックは crbug/1522657 に送信してください。

非推奨テストは無効になっています。

[パフォーマンス] > [メイン トラック] で選択した検索結果のポップオーバー

検索を簡単にするため、[パフォーマンス] > [メイン] トラックのフレームチャートで、検索結果を切り替えると、対応するイベントの上にポップオーバーが表示されるようになりました。

選択した検索結果の上にポップオーバーが表示される前と後。

Chromium の問題: 1523279。

ネットワーク パネルの更新

このバージョンでは、[ネットワーク] パネルが更新されています。

[ネットワーク] > [EventStream] タブのクリアボタンと検索フィルタ

[ネットワーク] > [EventStream] タブには、次のように表示されます。

  • テーブルにキャプチャされたイベントを消去する [消去] ボタン。
  • 正規表現を認識する検索フィルタ。

消去ボタンと検索フィルタを追加する前と後。

この機能のリリースにご協力いただいた Charles Vazac 様に感謝いたします。

また、[EventStream] タブでは、EventSource API だけでなく、サーバーから fetch/XHR を介して送信されるイベントもキャプチャされるようになりました。こちらのデモページでお試しください。

Chromium の問題: 1488863、40659493。

[ネットワーク] > [Cookie] に、サードパーティ Cookie の除外理由を示すツールチップ

[ネットワーク] > [Cookie] タブに、サードパーティ Cookie の段階的廃止によりブロックされるはずだった Cookie の横に、免除の理由を示すツールチップが表示されるようになりました。

サードパーティ Cookie の除外理由を含むツールチップが表示される前と後。

サードパーティ Cookie が許可される理由は次のとおりです。

Chromium の問題: 41491846。

[ソース] ですべてのブレークポイントを有効または無効にする

[ソース] > [ブレークポイント] セクションのプルダウン メニューに、[有効にする] オプションと [すべてのブレークポイントを無効にする] オプションが復元されます。以前は、これらのオプションはブレークポイントの再設計で除外されていました。

すべてのブレークポイントを有効または無効にするには、[ソース] > [ブレークポイント] でブレークポイントを右クリックし、対応するオプションを選択します。

有効化と無効化のオプションを復元する前と後。

Chromium の問題: 1522037。

Node.js 用 DevTools で読み込まれたスクリプトを表示する

Node.js 向け DevTools で、読み込まれたスクリプトが [ソース] > [スクリプト] のナビゲーション ツリーに表示されるようになります。

読み込まれたスクリプトのツリーを含む [スクリプト] タブを追加する前と後。

Chromium の問題: 1518364。

Lighthouse 11.5.0

[Lighthouse] パネルで Lighthouse 11.5.0 が実行されるようになりました。変更点の詳細なリストをご覧ください。

主な変更点として、レイアウト シフトの根本原因を推定する新しい監査があります。この監査は、レイアウト シフトの影響を受ける要素のみを一覧表示する layout-shift-elements 監査に代わるものです。

レイアウトのずれの根本原因を推定する新しい監査。

DevTools の Lighthouse パネルの基本的な使用方法については、Lighthouse: ウェブサイトの速度を最適化するをご覧ください。

Chromium の問題: 772558。

ユーザー補助

このバージョンでは、ユーザー補助機能が次のように改善されています。

  • スクリーン リーダーで次のように読み上げられるようになりました。
    • [レコーダー] パネルのセレクタ タイプの横にある [詳細] リンクテキスト。
    • の [設定] > [テスト] で、フィルタに一致するテストがない。
    • の [設定] > [ショートカット] でショートカットを削除、確認、復元する際のアクションの確認。
  • の [設定] > [位置情報] の表が、ユーザー補助ツールの表として正しくレンダリングされるようになりました。

Chromium の問題: 1516957、324282443、324467508、324930007。

その他のハイライト

このリリースの主な修正と改善点は次のとおりです。

  • DevTools のフォントが Chrome に合わせて更新されました（1523538）。
  • パフォーマンス: タイムラインにカーソルを合わせたときのスクリーンショットの表示を修正しました（1519469）。
  • ソース: コードの読みやすさを高めるために、エディタの行の高さを増やしました（1523640）。
  • [ネットワーク] > [レスポンス]: さまざまな形式とエンコードに関するさまざまな表示の問題を修正しました（1523128、1509336、1523128、41481944、1509336）。

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

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

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

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

DevTools の新機能

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