Chrome 133 の DevTools の新機能

Sofia Emelianova
Sofia Emelianova
GitHub

永続的な 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）。
    • 概要: 円グラフが棒グラフに置き換えられました。
    • [キャプチャ設定] の [拡張データ] チェックボックスの名前が [カスタム トラックを表示] に変更されました。
    • [分析情報] タブに [Passed insights (N)] セクションが追加されました。このセクションはデフォルトで閉じられています。
  • [Application] > [Storage]: 技術的には有効であるため、空のキーを使用してストレージ エントリを作成できます（373703285）。
  • chrome:// ページでデバイスモードが無効になりました（40186276）。
  • ネットワーク:
    • 対応する設定がオンになっている状態で [HAR をエクスポート] をクリックすると、2 つのオプション（サニタイズされたデータとセンシティブ データを含むデータ）を含むメニューが開きます。以前は、長押しでメニューが開かれていました（378076279）。
    • cURL としてコピーで、-H 'cookie:...' ではなく -b 属性を使用して Cookie をバイパスし、読みやすくしました（40791742）。
  • ユーザー補助: コンテキスト メニューを使用して、パネル内のタブを左右に移動できるようになりました（383164782）。
  • ネットワーク リクエストのブロック: このコマンド メニューの設定が、対応するチェックボックスと同期されるようになりました（378058733）。

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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