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）。
    • 概要: 円グラフが棒グラフに置き換えられます。
    • [キャプチャ設定] の [拡張機能データ] チェックボックスの名前が [カスタム トラックを表示] に変更されました。
    • [分析情報] タブに、[合格した分析情報（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 の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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