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

DevTools の新機能（Chrome 114）

Sofia Emelianova

Jecelyn Yeen

WebAssembly デバッグサポート

DevTools で、デフォルトで [Settings] > [Experiments] > [WebAssembly Debugging: Enable DWARF support] が有効になります。詳細については、最新のツールを使用した WebAssembly のデバッグをご覧ください。

このテストでは、すべてのデバッグ情報を使用して、Wasm アプリの C / C++ コードの実行を一時停止してデバッグできます。

DWARF デバッグ情報を使用してマッピングされた、元のソースコード。
コールスタック内のわかりやすい関数名。
ブレークポイントのサポートなど

デバッガで Wasm アプリケーションが一時停止しました。

Wasm デバッグをテストするには、C/C++ DevTools Support（DWARF）拡張機能をインストールし、Mandelbrot デモのコードを確認します。

Chromium の問題: 1414289

Wasm アプリでの歩行動作の改善

元のコードのステップオーバーで、逆アセンブリ（.wasm ファイル）での一時停止が回避されるようになりました。以前はここで一時停止していました。

ただし、ステップは、開始した関数の外に到達すると終了します（関数から戻った後など）。

この動作は、 [設定] > [設定] > [ソース] でデフォルトで有効になっています。

新しい設定は、[設定] の [ソース] にあります。

Chromium の問題: 1418938。

[要素] パネルと [問題] タブを使用して自動入力をデバッグする

Chrome の自動入力により、住所やお支払い情報などの保存済みの情報がフォームに自動入力されます。自動入力関連の問題を簡単にデバッグできるように、[要素] パネルで赤い曲線の下線で要素をハイライト表示できるようになりました。

この機能を試すには、 [設定] > [テスト] > [要素パネル DOM ツリーで違反しているノードまたは属性をハイライト表示] を有効にして、こちらのデモページをご確認ください。

自動入力に関する問題が [要素] パネルでハイライト表示され、[問題] パネルで報告されている。

DOM ツリーでハイライト表示された問題にカーソルを合わせて [問題を表示] をクリックすると、[問題] タブが開きます。このタブには、検出された問題がすべて一覧表示され、問題の原因を知ることができます。

Chromium の問題: 1399414。

レコーダーでのアサーション

[Recorder] パネルでは、すべてのランタイムデータを使用して、録画中にアサーションを直接追加できるようになりました。

アサーションを追加するには、新しい記録を開始してページを操作し、[Add assertion] をクリックします。レコーダーは、その場でカスタマイズできる waitForElement タイプのステップを挿入します。動画を見て、コーヒーカートのデモでのアサーションの実例をご覧ください。

この動画では、次のアサーションを行う方法を示します。

HTML 属性（要素の class など）。
JSON の JavaScript プロパティ（例: .innerText）。

また、JavaScript の条件文、ノードの子の数（count）、要素の可視性などをアサートするステップを構成することもできます。詳細については、構成手順をご覧ください。

また、レコーダーでは、サイドバイサイドコードビューと右クリックによる手順メニューに、ご希望のスクリプト形式が記憶されるようになりました。

Chromium の問題: 1423624

Lighthouse 10.1.1

[Lighthouse] パネルでは、10.1.0 で導入された重要な変更により、Lighthouse 10.1.1 が実行されます。URL に関するすべての監査がエンティティ別にグループ化され、サイズや期間などの数値統計が集計されるようになりました。よく使用される第三者にもカテゴリがタグ付けされるため、ページでの目的を簡単に特定できます。

監査をエンティティ別にグループ化。

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

Chromium の問題: 772558。

パフォーマンスの強化

`performance.mark()` でカーソルを合わせると、[パフォーマンス] > [速度] でタイミングが表示されます

performance.mark() メソッドは、[パフォーマンス] > [タイミング] で対応するマークにカーソルを合わせると、タイミングが表示されるようになりました。このタイミングは、前のナビゲーションイベントに対するタイムスタンプです。

[タイミング] セクションでカーソルを合わせるとタイミングが表示されるポップアップ。

Chromium の問題: 1426762。

`profile()` コマンドによる [パフォーマンス] > [メイン] への入力

コンソールの profile() コマンドと profileEnd() コマンドで、[パフォーマンス] パネルの [メイン] スレッドで CPU プロファイリングを開始および停止するようになりました。

console() コマンドは、[パフォーマンス] パネルにプロファイルを作成します。

Chromium の問題: 1429191。

ユーザー操作が遅い場合の警告

ユーザーインタラクションが 200 ミリ秒を超える場合、[Performance] > [Summary] タブに Interaction to Next Paint（INP）警告が表示されます。

INP の警告。

また、インタラクションの ID がツールチップから [概要] に移動しました。

Chromium の問題: 1432512、1432509。

ウェブに関する指標のトラックが移動されました

[パフォーマンス] パネルから次のトラックが削除されました。

ウェブに関する指標トラック代わりに、カーソルを合わせたときに速度トラックで関連するタイミングを確認できます。
[Long Tasks] サブトラック。このようなタスクは、[メイン] トラックに赤色の濃い色と赤い三角形で示されています。

[Web Vitals] トラックと [Long Tasks] トラックのどちらにも、他の場所に重複する情報が含まれていました。また、クリック時に詳細情報が表示される、より機能が充実した他のツールと比べて、インタラクティブではありません。

[ウェブに関する指標] を [速度] トラックに移動する前と後

また、「Experiences」トラックは、その用途をより正確に反映するために「Layout Shifts」という名称に変更されました。

詳しくは、ウェブに関する指標をご覧ください。

JavaScript Profiler のサポート終了: フェーズ 3

Chrome 58 以降、DevTools チームは最終的に JavaScript Profiler のサポートを終了する予定です。これにより、Node.js と Deno のデベロッパーは、JavaScript の CPU パフォーマンスのプロファイリングに [Performance] パネルを使用できるようになりました。

DevTools バージョン 114 では、JavaScript Profiler の 4 フェーズによるサポート終了のフェーズ 3 が開始されます。このフェーズでは、[JavaScript Profiler] パネルが DevTools から削除されますが、 [設定] > [テスト] で一時的に有効にし、のその他メニューから開くことができます。

[設定] > [テスト] の [JavaScript プロファイラ] チェックボックス。

CPU パフォーマンスをプロファイリングするには、[Performance] パネルを使用します。

Chromium の問題: 1428026。

その他のハイライト

このリリースでの注目すべき修正は次のとおりです。

カラー選択ツールが、クリップ時に色域外の HWB 値を検出するようになりました。（1429271）
[ソース] パネル:
- ソースマップで JSON 構文のハイライト表示を有効にしました。（1385374）
- 手動でソースマップを無効にすると、「ソースマップが検出されました」というメッセージの表示を停止しました。（1423718）
コンソールで、Ctrl+Enter キーを使用して不完全な JavaScript 式を評価し、構文エラーを出力できるようになりました（1314700）。
[Breakpoint edit] ダイアログに閉じるボタンが追加されました。これまでは、Enter キーを押すか、ダイアログのフォーカスを解除する必要がありました（1412980）。

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

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

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

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

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