DevTools の新機能（Chrome 125）

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini を使ってコンソールのエラーと警告について理解を深めましょう

この Chrome バージョンでは、DevTools コンソールに生成 AI 機能が導入されます。これは、発生したエラーや警告をより詳しく把握できるようにすることを目的としています。

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

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

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

要素でサポートされる @position-try ルール >スタイル

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

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

詳しくは、CSS Anchor Positioning API の概要をご覧ください。

Chromium の問題: 40279608。

ソースパネルの改善

このバージョンでは、[ソース] パネルにいくつかの改善を加えています。

自動プリティ プリントと角括弧の閉じ方を設定する

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

関連する動作を設定するには、設定の [設定] で、新しい check_box [閉じかっこの自動入力] と [check_box 圧縮されたソースを自動的にプリティ プリントする] オプションのチェックボックスをオンまたはオフにします。[設定] >出典。

自動プリティ プリントと角かっこの新しい設定を追加する前と後。

Chromium の問題: 40865010、324314570。

拒否された Promise が処理され、キャッチされたものとして認識される

[Sources] パネルで、拒否された Promise を .catch() または 2 つの引数の .then() で処理した場合に、捕捉されたものとして正しく認識されるようになりました。

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

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

検出された拒否の認識前と後。

Chromium の問題: 40283993。

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

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

デバッグを容易にするために、エラーのキャッチと再スロー時にエラーの原因を指定できます。コンソールで原因チェーンを順に調べると、Caused by: 接頭辞を付けて各エラースタックが出力されるため、元のエラーが引き続き確認できます。

「Caused by」接頭辞を付けてスタック トレースを出力する前と後の出力です。

Chromium の問題: 40182832。

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

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

Early Hints ヘッダーの検査

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

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

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

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

Chromium の問題: 40222701。

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

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

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

Chromium の問題: 40574989。

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

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

CSS セレクタの統計情報を取得する

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

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

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

Chromium の問題: 324282954

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

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

設定モードに入るには、トラック名の左にある [編集] ボタン [編集] をクリックします。次に、上矢印 arrow_upward または下 arrow_downward をクリックしてトラックを移動するか、visibility_off（非表示）をクリックします。完了したら、トラック名の右側にある [完了] チェックボタンをクリックします。

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

Chromium の問題: 311439339。

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

[Memory] パネルでキャプチャするヒープ スナップショットのリテーナーを無視できるようになりました。

リテーナーを無視するには、オブジェクトを選択し、[Retainer] セクションでリテーナーを右クリックし、プルダウン メニューから [Ignore this returner] を選択します。無視されるリテーナーには、[Distance] 列に 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）。
  • 要素 >[スタイル] タブで、次のことが行われるようになりました。 <ph type="x-smartling-placeholder">
      </ph>
    • カスタム プロパティを含む、完全にオーバーロードされた継承ルールが表示されます（41489874）。
    • カラーテーマに応じて、light-dark() で適用された値をハイライト表示します（331123816）。

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。