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

JS Profiler は廃止され、[パフォーマンス] パネルで CPU をプロファイリングする

Jecelyn Yeen

Nancy Li

[JavaScript Profiler] パネルは Chrome 124 で廃止されます。今後、Node.js の CPU パフォーマンスのプロファイリングには [Performance] パネルを使用します。

JavaScript Profiler のサポートを終了するのはなぜですか？（JS プロファイラ）

Chrome 58 以降、DevTools チームは最終的に JS Profiler のサポートを終了する予定です。これには次のような理由があります。

現在は積極的に開発されていません。JS プロファイラはここ数年大きなアップデートがまったくなく、チームには開発を続けるためのリソースもありません。
プロファイリングの効率化。[Performance] パネルはすでに、あらゆる種類のパフォーマンス分析に使用されています。Node.js で JavaScript の CPU パフォーマンスをプロファイリングする機能があるため、一貫性と効率性のためにすべてを 1 か所に集約するのが合理的です。
パフォーマンスパネルが改善されている。今後も新機能や機能強化を追加し、パフォーマンス分析のためのよりパワフルでユーザーフレンドリーなツールにしていきます。

サポートの終了後にすべきこと

JavaScript の CPU パフォーマンスをプロファイリングする方法については、Node.js のパフォーマンスをプロファイリングするをご覧ください。

[パフォーマンス] パネルを使用する際のヒントは次のとおりです。

フレームチャートを使用して、パフォーマンスのボトルネックを特定します。

フレームチャート。

[ボトムアップ] タブと [呼び出しツリー] タブを使用して、関数間の関係を理解します。

[ボトムアップ] タブ。

[呼び出しツリー] タブ

非推奨にどのように対応すればよいですか？

Google はプロトタイプを開発し、デベロッパーからのフィードバックを求めるために Request for Comments（RFC）を GitHub で公開しました。

さらに、デベロッパーエキスパートに積極的に連絡してプロトタイプをテストし、懸念事項や問題に対処して、[Performance] パネルがプロファイリングの主要なニーズを満たすようにしています。

デベロッパーが十分な時間を確保して調整と導入を行えるように、JS Profiler は 4 つのステージで段階的に廃止されます。

主な問題とその修正方法

寄せられたフィードバックの中で最も差し迫った懸念事項は、次の 3 つの主な問題でした。

.cpuprofile ファイル形式のサポート。JS プロファイラでは別のファイル形式が使用されます。[パフォーマンス] パネルでサポートされているはずです。
読み込み速度が遅い。パネルの読み込み速度が遅く、プロファイリングプロセスが妨げられているようです。
JavaScript VM セレクタがありません。JavaScript VM インスタンスセレクタがないため、特定のシナリオではプロファイリング機能が制限されます。

では、これらの問題を一つずつ取り上げ、どのように解決したかを見ていきましょう。

読み込み速度が遅い

デベロッパーからは、[Performance] パネルに大きなデータファイルを読み込むのに時間がかかりすぎて、場合によってはクラッシュするという報告がありました。

ここでは、DevTools を使用して DevTools を分析しました（「DevTools-on-DevTools」と呼びます）。問題を発見し、いくつかの最適化を行いました。

Set を Array データ構造に置き換えました。
不要な Map データ構造を削除しました。
メモリスタックの使用量を削減するために、再帰関数を反復関数（ループの場合）にリファクタリングしました。

これらのボトルネックを解消することで、大きなファイルの読み込みが 80% 高速化しました。🎉

詳しくは、ブログ投稿「perf-ception でパフォーマンスパネルが 400% 高速化」をご覧ください。

JavaScript VM セレクタが存在しない

最初のプロトタイプには JavaScript VM セレクタがありませんでした。デベロッパーはこれを使用してドリルダウンし、特定の VM インスタンスの分析に集中できます。

[パフォーマンス] パネルに JavaScript VM セレクタが追加されました。使用可能なすべての JavaScript VM インスタンスのプルダウンリストが表示されます。インスタンスを選択すると、[パフォーマンス] パネルにそのインスタンスの CPU プロファイルが読み込まれます。

[呼び出しツリー] タブ

`cpuprofile` ファイル形式のサポート

これまでは、[パフォーマンス] パネルではトレースファイル（トレースイベントの配列を含む JSON ファイル）しかサポートされていませんでした。

一方、JS Profiler では CPU プロファイルがサポートされていました。CPU プロファイルは、.cpuprofile という拡張子を持つ、JSON オブジェクトを含むファイルです。次のような形式です。

{
    // The list of profile nodes. First item is the root node.
    nodes: ProfileNode[];
    // Profiling start timestamp in microseconds.
    startTime: number;
    // Profiling end timestamp in microseconds.
    endTime: number;
    // Ids of samples at top nodes.
    samples?: integer[];
    // Time intervals between adjacent samples in microseconds.
    // The first delta is relative to the profile startTime.
    timeDeltas?: integer[];
}

新しいワークフローによって、デベロッパーが既存の cpuprofile を分析する妨げにならないようにする必要があります。そのため、[パフォーマンス] パネルでトレースファイルと CPU プロファイルの両方がサポートされるようになりました。cpuprofile ファイルを Performance にインポートすると、正しく読み込まれます。

バックグラウンドで正規表現を使用して、物体の構造の違いを検出します。ファイルのコンテンツが {"nodes":[ で始まる場合は、CPU プロファイルです。それ以外の場合はトレースファイルです。

コンテンツの種類が特定されると、それに応じて処理されます。トレースファイルの場合は、イベントを解析してタイムラインを作成します。CPU プロファイルの場合は、JSON オブジェクトを解析してフレームチャートを作成します。

まとめ

[Performance] パネルを使用すると、ウェブサイトのプロファイリングと、Node.js および Deno のアプリケーションでの CPU パフォーマンスのプロファイリングの両方を合理化できます。

フィードバックやご提案がございましたら、こちらのバグにコメントするか、以下のいずれかの方法でご連絡ください。

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

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

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

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

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