このページは 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 ファイル）の一時停止が回避されるようになりました。以前はそこで一時停止していました。

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

この動作はデフォルトで、 [Settings] > [Preferences] > [Sources] で有効になっています。

[設定] > [ソース] の新しい設定です。

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] パネルでは Lighthouse 10.1.1 が実行されるようになりました。10.1.0 では重要な変更が行われています。URL を処理するすべての監査がエンティティ別にグループ化され、サイズや期間などの数値統計情報が集計されるようになりました。よく使用される第三者もカテゴリのタグが付けられるため、ページ上で目的を識別しやすくなります。

エンティティ別にグループ化された監査。

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

Chromium の問題: 772558。

パフォーマンスの強化

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

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

[タイミング] セクションでカーソルを合わせたタイミングを示すポップアップ。

Chromium の問題: 1426762。

`profile()` コマンドで [Performance] > [Main] に値が入力される

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

console() コマンドを使用すると、[パフォーマンス] パネルでプロファイルが作成されます。

Chromium の問題: 1429191。

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

200 ミリ秒を超えるユーザー操作については、[Performance] > [Summary] タブに [Interaction to Next Paint (INP)] 警告が表示されます。

INP 警告。

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

Chromium の問題: 1432512、1432509。

Web Vitals トラックは移動しました

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

Web Vitals トラック。その代わりに、[タイミング] トラックにカーソルを合わせると、関連するタイミングが表示されます。
時間のかかるタスクのサブトラック。このようなタスクは、赤い三角形で色付けされたメイントラックにすでに含まれています。

Web Vitals と Long Tasks の両方のトラックに、他の場所と重複する情報が含まれていました。また、クリック時により詳細な情報が表示されるフル機能の代替コンテンツよりも、非インタラクティブな内容でした。

ウェブに関する指標のタイミングトラックへの移行前と移行後。

また、使用方法をより正確に反映するため、Experiences トラックの名前を Layout Shifts に変更しました。

詳しくは、Web Vitals をご覧ください。

JavaScript プロファイラの非推奨: フェーズ 3

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

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

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

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

Chromium の問題: 1428026

その他のハイライト

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

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

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。