DevTools の新機能（Chrome 123）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

[要素] パネルの更新

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

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

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

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

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

Chromium の問題: 1468393

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

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

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

Chromium の問題: 1520417。

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

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

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

長さツールを再びオンにするには、設定 [設定] を消去します >テスト >check_box CSS <length> のサポートを終了するツールを使用できます。

それでもこのツールを使用したい場合は、DevTools チームにあなたの意見や、この長さツールがワークフローにどのように役立つかを教えてください。crbug/1522657 にフィードバックをお寄せください。

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

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

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

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

Chromium の問題: 1523279。

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

このバージョンでは、[ネットワーク] パネルにいくつかの更新が行われました。

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

ネットワーク >[EventStream] タブで取得されるデータ:

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

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

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

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

Chromium の問題: 1488863、40659493。

ネットワークでのサードパーティ Cookie の除外理由に関するツールチップ >クッキー

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

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

サードパーティ Cookie は、次の理由で許可される場合があります。

Chromium の問題: 41491846

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

出典 >[Breakpoints] セクションのプルダウン メニューに [Enable] および [Disable allbreakpoints] オプションが表示されます。以前のブレークポイントの再設計では、これらのオプションを省略していました。

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

有効化オプションと無効化オプションを元に戻す前と後。

Chromium の問題: 1522037。

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

DevTools for Node.js のナビゲーション ツリーの [ソース] >スクリプト。

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

Chromium の問題: 1518364。

Lighthouse 11.5.0

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

注目すべき変更点として、レイアウト シフトの根本原因を推定する新しい監査があります。この監査は、レイアウト シフトの影響を受ける要素のみをリストするレイアウト シフト要素の監査に代わるものです。

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

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

Chromium の問題: 772558。

ユーザー補助

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

  • スクリーン リーダーで読み上げられる内容: <ph type="x-smartling-placeholder">
      </ph>
    • [レコーダー] パネルのセレクタ タイプの横にある [詳細] リンクテキスト。
    • 設定の [設定] > でフィルタに一致するテストがない場合テスト。
    • 設定 [設定] > でショートカットを削除、確認、復元する際の操作の確認ショートカット。
  • 設定 [設定] >Locations がユーザー補助ツールの表として正しくレンダリングされるようになりました。

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 動画にコメントを残してください。

DevTools の新機能

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