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

DevTools の新機能（Chrome 123）

Sofia Emelianova

イースターエッグを見つける

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

見つけるには、カラフルな 💫? 絵文字を探してください。

[要素] パネルの更新

このバージョンでは、[Elements] パネルに複数の更新を加えています。

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

[要素] > [スタイル] タブの [要素の状態を切り替える]（:hov）ボタンの下に、check_box [フォーカスしたページをエミュレート] オプションが追加されました。これまでは、このオプションは [Rendering] パネルにしか表示されませんでした。

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

[Styles] タブでフォーカスされているページをエミュレートする前と後の画面

Chromium の問題: 1468393。

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

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

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

Chromium の問題: 1520417。

CSS の長さツールのサポートは終了しました

CSS の長さ作成ツールは、ワークフローが遅くなり、あまり価値がないというフィードバックがあったため、非推奨になりました。

プルダウンメニューからドラッグして値を調整したり、ユニットタイプを選択したりできなくなりました。代わりに、値をダブルクリックして新しい値を入力します。

長さツールを再び有効にするには、settings [設定] > [テスト] > check_box [スタイル] タブで CSS <長さ> 作成ツールを廃止する] をオフにします。

引き続きこのツールを使用したい場合は、DevTools チームは皆様のご意見と、この長さツールがワークフローにどのように役立つかについてお聞かせいただければ幸いです。crbug/1522657 にフィードバックをお寄せください。

非推奨テストはオフになっています。

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

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

Chromium の問題: 1523279。

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

このバージョンでは、[Network] パネルにいくつかの更新を加えています。

[ネットワーク] > [イベントストリーム] タブの [消去] ボタンと検索フィルタ

[ネットワーク] > [イベントストリーム] タブの情報は次のとおりです。

表内のキャプチャされたイベントを消去するブロックの [消去] ボタン。
正規表現を認識する検索フィルタ。

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

この機能を導入してくれた Charles Vazac に、DevTools チームは感謝の意を表します。

また、[EventStream] タブでは、EventSource API だけでなく、サーバーがフェッチや XHR で送信するイベントも取得できるようになりました。こちらのデモページでお試しください。

Chromium の問題: 1488863、40659493。

サードパーティ Cookie の除外理由が記載されたツールチップ（[ネットワーク] > [Cookie]）

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

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

サードパーティ Cookie が許可される理由には、次のようなものがあります。

Chrome Enterprise のポリシー
Storage Access API または最上位の Storage Access API
サードパーティ Cookie の段階的廃止に関するサポート終了トライアルまたはその猶予期間
サードパーティ Cookie の段階的廃止のヒューリスティック
ユーザー設定

Chromium の問題: 41491846。

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

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

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

Chromium の問題: 1522037。

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

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

読み込まれたスクリプトのツリーが表示された [Scripts] タブの追加前と追加後。

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 に関するその他のことについて話し合うには、次のオプションを使用します。

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