DevTools の新機能（Chrome 125）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

エラーまたは警告に関する AI 生成の説明を取得するには、[コンソール] のメッセージの横にある 電球のスパーク。 [このエラー（警告）を理解する] ボタンをクリックし、手順に沿って操作します。

AI によって生成されたエラーの説明。

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

[Elements] > [Styles] で @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 が正しくキャッチされたものとして認識されるようになりました。

つまり、[Sources] > [Breakpoints] > [Pause on uncaught exceptions] がオンになっている場合、デバッガは次のようなステートメントで一時停止しません。

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

認識前と認識後のキャッチされた拒否。

Chromium の問題: 40283993。

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

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

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

`Caused by` プレフィックスが付いた印刷スタック トレースの前後。

Chromium の問題: 40182832。

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

このバージョンでは、[ネットワーク] パネルにいくつかの改善が加えられています。

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

Early Hints ヘッダーは、[ネットワーク] パネルの [ヘッダー] タブの専用セクションに表示されます。以前は、関連するヘッダーは [レスポンス ヘッダー] セクションに表示されていました。

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

専用セクションを追加する前と後。

詳細については、Early Hints を使用してサーバーのシンクタイムでページ読み込みを高速化するをご覧ください。

Chromium の問題: 40222701。

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

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

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

Chromium の問題: 40574989。

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

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

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

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

統計情報を確認するには、[Recalculate Style] イベントを選択し、新しい [Selector Stats] タブを開きます。このタブには、各セレクタの経過時間、一致試行回数と一致数、スローパスで一致しなかった割合に関する情報が表示されます。

セレクタを追加する前後の統計情報。

Chromium の問題: 324282954。

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

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

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

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

Chromium の問題: 311439339。

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

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

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

リテーナーを無視するオプションを追加する前後の画像。

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

Chromium の問題: 327337527。

Lighthouse 11.7.1

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

主な変更点として、このバージョンで古くなった Publisher Ads プラグインのサポートが終了しました。

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

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

Chromium の問題: 772558。

その他のハイライト

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

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

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

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

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

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

DevTools の新機能

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