このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 125）

Sofia Emelianova

Gemini でコンソール内のエラーと警告についての理解を深める

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

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

AI が生成したエラーの説明。

詳しくは、AI でエラーと警告をより的確に把握するをご覧ください。

`@position-try` ルールが [要素] > [スタイル] でサポートされるようになりました

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

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

詳しくは、CSS のアンカー配置を使用して要素をテザリングするをご覧ください。

Chromium の問題: 40279608。

ソースパネルの改善

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

自動プリティプリントと角かっこの終了を設定する

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

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

Chromium の問題: 40865010、324314570。

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

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

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

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

キャッチされた不承認を認識する前と認識後。

Chromium の問題: 40283993。

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

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

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

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

Chromium の問題: 40182832

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

このバージョンでは、[Network] パネルを改善しました。

Early Hints ヘッダーを検査する

Early Hints ヘッダーは、[Network] パネルのリクエストの [Headers] タブ内に専用のセクションを使用します。以前は、関連するヘッダーが「レスポンスヘッダー」セクションにありました。

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

Early Hints 専用のセクションを追加する前と追加した後。

詳しくは、早期ヒントを使用したサーバーのシンクタイムによるページ読み込みの高速化をご覧ください。

Chromium の問題: 40222701

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

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

[Waterfall] 列を非表示にするオプションを追加する前と後。

Chromium の問題: 40574989。

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

このバージョンでは、[パフォーマンス] パネルを改善しました。

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

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

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

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

Chromium の問題: 324282954。

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

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

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

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

Chromium の問題: 311439339

メモリパネルの保持要素を無視する

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

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

保持者を無視するオプションを追加する前と後。

さらに、ヒープスナップショットはより多くの（数億）コンテインメントエッジとノードをサポートするようになりました（332350576）。

Chromium の問題: 327337527。

Lighthouse 11.7.1

[Lighthouse] パネルでは、Lighthouse 11.7.1 で実行されるようになりました。変更点の一覧をご覧ください。

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

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

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

Chromium の問題: 772558。

その他のハイライト

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

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

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

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

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

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

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