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

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

Chromium の問題: 1429191。

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

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

INP の警告。

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

Chromium の問題: 1432512、1432509。

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

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

ウェブ バイタルと長いタスクの両方のトラックに、他の場所で重複している情報が含まれていました。また、クリックすると詳細情報が表示される、より機能が充実した代替手段と比較して、インタラクティブ性もありませんでした。

ウェブ バイタルを Timings トラックに移動する前後の状態。

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

詳しくは、ウェブ バイタルをご覧ください。

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

Chrome 58 の時点で、DevTools チームは最終的に JavaScript プロファイラを非推奨とし、Node.js と Deno のデベロッパーが JavaScript CPU パフォーマンスのプロファイリングに [パフォーマンス] パネルを使用できるようにする計画を立てていました。

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

[設定]、[試験運用版] の順に移動し、[JavaScript プロファイラ] チェックボックスをオンにします。

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

Chromium の問題: 1428026。

その他のハイライト

このリリースでの重要な修正は次のとおりです。

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

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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