DevTools の新機能（Chrome 123）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

[要素] パネルの更新

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

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

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

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

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

Chromium の問題: 1468393

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

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

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

Chromium の問題: 1520417。

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

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

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

長さツールを再び有効にするには、設定の [設定] > [テスト] > check_box [スタイル] タブの CSS <長さ> 作成ツールのサポートを終了します。

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

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

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

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

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

Chromium の問題: 1523279。

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

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

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

[ネットワーク] > [EventStream] タブに表示される情報は次のとおりです。

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

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

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

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

Chromium の問題: 1488863、40659493。

[ネットワーク] > [Cookie] に表示されるサードパーティ Cookie の除外理由に関するツールチップ

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

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

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

Chromium の問題: 41491846

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

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

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

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

Chromium の問題: 1522037。

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

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

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

Chromium の問題: 1518364。

Lighthouse 11.5.0

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

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

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

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 の [More options] その他   > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 入門ガイド

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 はキャンセルされました。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59