DevTools の新機能（Chrome 125）

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini でコンソールのエラーと警告をより深く理解する

このバージョンの Chrome では、DevTools のコンソールに生成 AI 機能が導入され、発生したエラーや警告をより深く理解できるようになりました。

エラーや警告に関する AI 生成の説明を取得するには、Console のメッセージの横にある 電球の火花。 [このエラー（警告）について] ボタンをクリックし、手順に沿って操作します。

エラーの AI 生成の説明。

詳細については、AI を使用してエラーと警告をより正確に把握するをご覧ください。

@position-try [要素] > [スタイル] でのルールのサポート

CSS アンカーの配置のデバッグに役立つように、[要素] > [スタイル] タブで @position-try CSS ルールがサポートされるようになりました。このタブでは、position-try-options 値が解決され、各オプションが専用の @position-try --name セクションにリンクされます。

@position-try CSS ルールをサポートする前と後。

詳細については、CSS アンカー ポジショニング API の概要をご覧ください。

Chromium の問題: 40279608。

[ソース] パネルの改善

このバージョンでは、[ソース] パネルが改善されています。

自動の美しい出力とかっこの閉じを構成する

[ソース] で、エディタの自動プリティプリントと中かっこの閉じをオンまたはオフにできるようになりました。プリティ プリントを使用すると、圧縮されたファイルを読みやすくできます。かっこの閉じは、開始かっこを入力すると自動的に閉じかっこ（) または }）またはタグ（>）が追加されます。

関連する動作を構成するには、 [設定] > [環境設定] > [ソース] で、新しい [かっこを自動的に閉じる] と [圧縮されたソースを自動的に美しく表示する] をオンまたはオフにします。

自動の美しい出力と中かっこの閉じの新しい設定を追加する前と後。

Chromium の問題: 40865010、324314570。

拒否された promise がキャッチされたものとして認識される

拒否されたプロミスを .catch() または 2 つの引数を持つ .then() で処理した場合、[ソース] パネルで、拒否されたプロミスがキャッチされたものとして正しく認識されるようになりました。

つまり、[ソース] > [ブレークポイント] > [未処理の例外で停止] がオンになっている場合、デバッガは次のようなステートメントで停止しません。

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

検出された不承認の認識前と認識後。

Chromium の問題: 40283993。

コンソールでのエラーの原因

コンソールに、スタック トレース内のエラーの原因のチェーン（存在する場合）が表示されるようになりました。

デバッグを容易にするため、エラーをキャッチして再スローするときにエラーの原因を指定できます。コンソールは原因チェーンを遡る際に、各エラースタックに Caused by: という接頭辞を付けて出力するため、元のエラーを確認できます。

スタック トレース出力の前後と、接頭辞「Caused by」が付いています。

Chromium の問題: 40182832。

ネットワーク パネルの改善

このバージョンでは、[ネットワーク] パネルが改善されています。

早期ヒントのヘッダーを検査する

早期ヒント ヘッダーには、[ネットワーク] パネルのリクエストの [ヘッダー] タブに専用のセクションがあります。これまでは、関連するヘッダーは [レスポンス ヘッダー] セクションに表示されていました。

Early Hints は、最終的なレスポンスの前に予備の HTTP レスポンスを送信するために使用される HTTP ステータス コード（103 Early Hints）です。これにより、サーバーがメイン リソースの生成に忙しい間に、ページで使用される可能性が高い重要なサブリソース（スタイルシートや重要な JavaScript など）やオリジンに関するヒントをブラウザに送信できます。

早期ヒント専用のセクションを追加する前と後。

詳細については、早期ヒントによるサーバー思考時間を使用してページの読み込みを高速化するをご覧ください。

Chromium の問題: 40222701。

ウォーターフォール列を非表示にする

他の列と同様に、[ネットワーク] パネルで [ウォーターフォール] 列を非表示にできるようになりました。任意の列名を右クリックし、プルダウン メニューの [ Waterfall] チェックボックスをオフにします。

ウォーターフォール列を非表示にするオプションを追加する前と後。

Chromium の問題: 40574989。

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

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

CSS セレクタの統計データを取得する

[パフォーマンス] パネルに、長時間実行される [スタイルの再計算] イベントの CSS セレクタの統計情報をキャプチャできる新しい設定が追加されました。

統計情報を表示するには、[スタイルの再計算] イベントを選択し、新しい [セレクタの統計情報] タブを開きます。このタブには、各セレクタの経過時間、一致試行回数とカウント、スローパスの不一致率が表示されます。

セレクタ統計情報の追加前と追加後。

Chromium の問題: 324282954。

順序を変更してトラックを非表示にする

[パフォーマンス] パネルに、トラックの順序を変更したり、トラックを非表示にしたりできる新しい構成モードが追加されました。

構成モードに入るには、トラック名の左側にあるアイコン 編集ボタンをクリックします。次に、 上矢印または 下矢印をクリックしてトラックを移動するか、 非表示をクリックします。完了したら、トラック名の右側にあるアイコン チェック ボタンをクリックします。

次のバージョンの Chrome 126 では、この UI がさらに改善されます。

Chromium の問題: 311439339。

メモリパネルでリテーナーを無視する

[メモリ] パネルでキャプチャしたヒープ スナップショットで、保持を無視できるようになりました。

保持を無視するには、オブジェクトを選択し、[保持] セクションで保持を右クリックし、プルダウン メニューから [この保持を無視] を選択します。無視される保持子は、[距離] 列に ignored の値でマークされます。無視を停止するには、上部にあるアクションバーで [無視した保持を復元] をクリックします。

リテイナーを無視するオプションを追加する前と後。

また、ヒープ スナップショットで、より多くの（数億個）の包含エッジとノード（332350576）をサポートできるようになりました。

Chromium の問題: 327337527。

Lighthouse 11.7.1

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

主な変更点として、パブリッシャー広告プラグインのサポートが非推奨になりました。このプラグインは、このバージョンでサポートが終了しました。

パブリッシャー広告プラグインのサポートを追加する前と削除した後。

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

Chromium の問題: 772558。

その他のハイライト

このリリースの主な修正と改善点は次のとおりです。

  • [Recorder] パネルのプレビュー版ステータスが正式に解除されました（329271496）。
  • カスタム フォーマッタが body() 関数に対して null を返す場合、コンソールにエラーが表示されなくなりました。これは有効な動作です（329400119）。
  • [ソース] パネルの構文ハイライト表示を更新しました。特に、正規表現の v フラグと d フラグをサポートするようになりました。
  • [ネットワーク] > [Cookie] タブで、除外対象の Cookie をレスポンス Cookie にマッピングするバグを修正しました（41491846）。
  • [要素] > [スタイル] タブが次のように変更されました。
    • カスタム プロパティを使用して完全にオーバーロードされた継承ルールが表示されます（41489874）。
    • 色テーマ（331123816）に応じて、light-dark() で適用された値をハイライト表示します。

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

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

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

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

DevTools の新機能

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