DevTools の新機能（Chrome 114）

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

WebAssembly デバッグのサポート

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

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

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

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

Wasm デバッグをテストするには、C/C++ DevTools Support（DWARF）拡張機能をインストールし、マンデルブロ集合のデモでコードをステップ実行します。

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 プロファイリングを開始および停止できるようになりました。