DevTools の新機能（Chrome 114）

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

WebAssembly デバッグ サポート

DevTools では、デフォルトで 設定] をタップします。 [設定] > [試験運用版] > チェックボックス。 [WebAssembly デバッグ: DWARF サポートを有効にする] が有効になっています。詳細については、最新のツールで WebAssembly をデバッグするをご覧ください。

この試験運用版では、実行を一時停止して Wasm アプリの C コードと C++ コードをデバッグできます。デバッグ情報はすべて利用できます。

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

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

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

Chromium の問題: 1414289。

Wasm アプリでのステップ実行の動作を改善しました

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

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

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

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

Chromium の問題: 1418938。

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

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

この機能を確認するには、設定] をタップします。 [設定] > [試験運用版] > チェックボックス。 [要素パネルの DOM ツリーで違反しているノードまたは属性をハイライト表示] を有効にして、このデモページを検査します。

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

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

Chromium の問題: 1399414。

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

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

アサーションを追加するには、新しい録画を開始してページを操作し、[アサーションを追加] をクリックします。レコーダーは、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() メソッドのタイミングが表示されるようになりました。ここでのタイミングは、前のナビゲーション イベントを基準としたタイムスタンプです。

[タイミング] セクションのホバー時のタイミングを示すポップアップ。

Chromium の問題: 1426762。

profile() コマンドで [パフォーマンス] > [メイン] にデータが入力されます。

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

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

Chromium の問題: 1429191。

ユーザー操作の遅延に関する警告

200 ミリ秒を超えるユーザー操作の場合、[パフォーマンス] > [概要] タブに [Interaction to Next Paint（INP）] の警告が表示されます。

INP の警告。

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

Chromium の問題: 1432512、1432509。

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

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

[ウェブ バイタルズ] トラックと [長時間タスク] トラックの両方に、他の場所に重複する情報が含まれていました。また、クリックすると詳細情報を表示する、より高度な機能を持つ代替手段と比較して、インタラクティブではありませんでした。

ウェブ バイタルをタイミング トラックに移動する前と後。

また、使用状況をより正確に反映するため、[エクスペリエンス] トラックの名前を [レイアウト シフト] に変更しました。

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

JavaScript プロファイラのサポート終了: フェーズ 3

Chrome 58 以降、DevTools チームは、JavaScript プロファイラを段階的に非推奨とし、Node.js デベロッパーと Deno デベロッパーが JavaScript CPU パフォーマンスのプロファイリングにパフォーマンス パネルを使用するようにすることを計画していました。

DevTools バージョン 114 では、4 段階の JavaScript プロファイラのサポート終了のフェーズ 3 が開始されます。このフェーズでは、JavaScript プロファイラ パネルは DevTools から削除されますが、設定] をタップします。 [設定] > [試験運用版] で一時的に有効にして、その他メニュー。 のその他メニューから開くことができます。

[設定] > [試験運用版] の [JavaScript プロファイラ] チェックボックス。

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

Chromium の問題: 1428026。

その他のハイライト

このリリースで修正された主な点は次のとおりです。

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

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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