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

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

Jecelyn Yeen

Nancy Li

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

JavaScript Profiler が非推奨になるのはなぜですか？（JS Profiler）

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

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

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

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

[パフォーマンス] パネルを使用する際のヒントを次に示します。

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

フレームチャート。

[Bottom-up] タブと [Call tree] タブを使用して、関数間の関係を理解してください。

[ボトムアップ] タブ。

[Call tree] タブ。

サポート終了にどのように対処しますか？

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

さらに、デベロッパーエキスパートに積極的に働きかけてプロトタイプをテストし、あらゆる懸念や問題に対処して [Performance] パネルがプロファイリングのコアニーズを満たしていることを確認します。

JS Profiler は、デベロッパーが十分な時間をかけて調整して導入できるように、4 段階で段階的に廃止しています。

主な問題とその修正方法

寄せられたフィードバックの中で、特に差し迫った懸念事項は次の 3 つでした。

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

それぞれの問題とその解決方法を見てみましょう。

読み込み速度が遅い

パフォーマンス パネルは、大きなデータファイルの読み込みに時間がかかりすぎてクラッシュすることさえあったと報告しています。

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

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

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

Google が学んだことについて詳しくは、perf-ception でパフォーマンスパネルを 400% 高速化をご覧ください。

欠落している JavaScript VM セレクタ

最初のプロトタイプには JavaScript VM セレクタがありませんでした。開発者はこれを使用して、特定の VM インスタンスの分析に焦点を当てます。

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

[Call tree] タブ。

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

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

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

{
    // 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 動画でコメントを残してください。