Chrome 133 の DevTools の新機能

永続的な AI チャット履歴

AI アシスタンス パネルで、セッション間でチャット履歴がローカルに保持されるようになりました。これにより、DevTools や Chrome を再読み込みした後でも、Gemini との以前の会話を確認できます。

[パフォーマンス] パネルの改善

このバージョンでは、[パフォーマンス] パネルにさまざまな改善が加えられています。

画像配信の分析情報

[パフォーマンス] > [分析情報] タブで、ファイルサイズを最適化できる画像をハイライト表示できるようになりました。分析情報の画像をクリックすると、[ネットワーク] トラックでハイライト表示されます。

画像配信を最適化する方法については、画像を効率的にエンコードするをご覧ください。

従来型と最新型のキーボード ナビゲーション

[パフォーマンス] パネルで、キーボード ナビゲーションの優先スタイルを選択できるようになりました。主な違いは次のとおりです。

• クラシック: マウスホイール（タッチパッドの上下）でズームし、Shift+マウスホイールで垂直スクロールします。
• モダン: マウスホイールで縦スクロール、Shift+マウスホイールで横スクロール、Command/Control+マウスホイールでズーム。

好みのスタイルを選択するには、パネルの右上にある [ヘルプ] [ショートカットを表示] をクリックし、[クラシック] または [モダン] を選択します。ショートカット ダイアログには、使用可能なショートカットのチートシートも表示されます。

フレーム チャートで無関係なスクリプトを無視する

コードに集中できるように、無関係なスクリプトを [パフォーマンス] パネルから無視リストに追加できるようになりました。パネルは、過剰なネストを自動的に折りたたみます。

無視リストにスクリプトを追加するには、上部のアクションバーにある 圧縮 無視リストの設定ダイアログを表示をクリックし、入力欄に正規表現を入力します。入力すると、フレーム グラフに新しいルールが適用されます。

DevTools で追加した無視リストのルールは、設定 [設定] > [無視リスト] に保存されます。ダイアログでこれらのルールをオン / オフに切り替えることができます。

タイムライン マーカーと範囲のハイライト表示（マウスオーバー時）

パフォーマンス トレースをより深く理解できるように、[パフォーマンス] パネルで次のことができるようになりました。

• [タイムライン] にカーソルを合わせると、パフォーマンス トレース全体にわたる縦のマーカーが表示されます。
• メイン トラックの項目にカーソルを合わせると、タイムラインの範囲がハイライト表示されます。

推奨されるスロットリング設定

[パフォーマンス] パネルで、ライブ指標と関連する設定の [キャプチャ設定] プルダウン メニューの両方で、スロットリング設定が推奨されるようになりました。

推奨される CPU スロットリングは（現時点では）最も頻繁に使用される 4x slowdown であり、ネットワークの推奨事項は、ライブ指標で有効になっている場合は Chrome UX レポートのデータに基づいています。

また、[パフォーマンス] パネルの [最近のセッション] プルダウン メニューの各トレースの横に、使用したスロットリング設定が表示されるようになりました。

オーバーレイのタイミング マーカー

タイミング マーカーが [タイミング] トラックからトレースの下部に移動し、すべてのトラックの上にオーバーレイされるようになりました。これにより、[タイミング] トラックが非表示の場合でもタイミング マーカーが表示されます。

タイミング トラックは、カスタムの mark() 呼び出しと measure() 呼び出しを保持します。

[概要] の JavaScript 呼び出しのスタック トレース

[パフォーマンス] > [概要] タブに、非同期のものを含む JavaScript 呼び出しのスタック トレースが表示されるようになりました。

Elements のメニューにバッジの設定が移動

[要素] パネルのバッジ設定が、デフォルトで非表示のアクションバーから対応する右クリック メニューに移動しました。

新しい [最新情報] パネル

[新機能] パネルのデザインが新しくなり、Chrome のデザインに近づきました。

Chromium の問題: 325441858。

Lighthouse 12.3.0

Lighthouse パネルで Lighthouse 12.3.0 が実行されるようになりました。

このアップデートでは、COOP と強力な HSTS ポリシーでオリジン分離が適切に行われていることを確認する新しい監査が追加されています。変更点の詳細なリストをご覧ください。

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

Chromium の問題: 40543651。

その他のハイライト

このリリースにおける注目すべき修正と改善点は次のとおりです。

• ソース: 一時停止中に、一時停止後に作成されたサービス ワーカー コンテキストに デバッガ が予期せず切り替わることがなくなりました（373893057）。
• パフォーマンス:
  • スクリプトにカーソルを合わせると、フレーム チャートのツールチップに URL が表示されるようになりました（368541957）。
  • 概要: 円グラフが棒グラフに置き換えられます。
  • [キャプチャ設定] の [拡張機能データ] チェックボックスの名前が [カスタム トラックを表示] に変更されました。
  • [分析情報] タブに、[合格した分析情報（N）] セクションが追加されました。このセクションはデフォルトで折りたたまれています。
• アプリケーション > ストレージ: ストレージ エントリは、技術的には有効であるため、空のキーで作成できます（373703285）。
• chrome:// ページでデバイスモードが無効になりました（40186276）。
• ネットワーク:
  • 対応する設定がオンになっている場合、[HAR をエクスポート] を 1 回クリックすると、2 つのオプション（サニタイズ済みとセンシティブ データを含む）を含むメニューが開きます。以前は、長押しでメニューが開いていました（378076279）。
  • cURL としてコピーで、-H 'cookie:...' の代わりに -b 属性を使用して Cookie をバイパスし、読みやすくしました（40791742）。
• ユーザー補助: コンテキスト メニューを使用して、パネル内のタブを左右に移動できるようになりました（383164782）。
• ネットワーク リクエストのブロック: このコマンド メニューの設定が、対応するチェックボックス（378058733）と同期されるようになりました。

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

• フィードバックや機能リクエストは、crbug.com からお送りください。
• DevTools の more_vert その他のオプション > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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