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。

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

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

[Network] > [EventStream] タブのクリアボタンと検索フィルタ

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

  • テーブルでキャプチャされたイベントをクリアする [] [クリア] ボタン。
  • 正規表現を理解する検索フィルタ。

[クリア] ボタンと検索フィルタを追加する前後の様子。

この機能を実装してくれた Charles Vazac に感謝します。

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

Chromium の問題: 1488863、40659493。

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

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

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

サードパーティ Cookie が許可される理由としては、次のことが考えられます。

Chromium の問題: 41491846。

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

[Sources] > [Breakpoints] セクションのプルダウン メニューに、[Enable] と [Disable all breakpoints] のオプションが追加されました。以前は、これらのオプションはブレークポイントの再設計で除外されていました。

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

有効 / 無効オプションを復活させる前後の状態。

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。

ユーザー補助

このバージョンでは、アクセシビリティが次のように改善されています。

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

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 の新機能シリーズで取り上げたすべての内容のリスト。