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

Jecelyn Yeen
Nancy Li
Nancy Li
LinkedIn

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

JavaScript プロファイラが非推奨になるのはなぜですか？（JS プロファイラ）

Chrome 58 以降、DevTools チームは JS プロファイラのサポートを段階的に終了することを計画していました。理由は次のとおりです。

  • 現在、開発は行われていません。JS プロファイラは数年間にわたってメジャー アップデートされておらず、チームにはプロファイラの開発を継続するためのリソースがありません。
  • プロファイリングの効率化。[パフォーマンス] パネルはすでにさまざまなパフォーマンス分析に使用されており、Node.js で JavaScript CPU パフォーマンスをプロファイリングできるため、一貫性と効率性を高めるために、すべてを 1 か所に統合することが理にかなっています。
  • パフォーマンス パネルが改善されました。Google は、新機能や機能強化を追加することで、パフォーマンス分析のためのより強力で使いやすいツールにするために、引き続き改善を続けています。

非推奨になった後はどうすればよいですか？

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

[パフォーマンス] パネルを使用する際のヒントをいくつかご紹介します。

  • 炎グラフを使用して、パフォーマンスのボトルネックを特定します。

フレームグラフ。

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

[ボトムアップ] タブ。

[呼び出しツリー] タブ。

非推奨への対応方法

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

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

デベロッパーが調整と導入に十分な時間を確保できるように、JS プロファイラは4 段階に分けて段階的に廃止されます。

主な問題とその解決方法

寄せられたフィードバックの中で、最も切迫した懸念は次の 3 つの主な問題に集中していました。

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

これらの問題とその解決方法について、詳しく見ていきましょう。

読み込み速度が遅い

デベロッパーから、[パフォーマンス] パネルで大規模なデータファイルを読み込むのに時間がかかり、クラッシュすることもあったという報告がありました。

私たちは DevTools を使用して DevTools を分析しました（「DevTools-on-DevTools」と呼んでいます）。問題が見つかったため、いくつかの最適化を行いました。

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

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

得られた知見について詳しくは、perf-ception によるパフォーマンス パネルの 400% の高速化をご覧ください。

不足している JavaScript VM セレクタ

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

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

[呼び出しツリー] タブ。

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

以前は、[パフォーマンス] パネルでサポートされていたのは、トレース イベントの配列を含む JSON ファイルであるトレース ファイルのみでした。

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

{
    // 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 ファイルを [パフォーマンス] にインポートすると、正しく読み込まれます。

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

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

まとめ

ウェブサイトのプロファイリングと、Node.js アプリケーションと Deno アプリケーションの CPU パフォーマンスのプロファイリングの両方で、より効率的なプロファイリングを行うには、[パフォーマンス] パネルを使用します。

フィードバックや提案がございましたら、こちらのバグにコメントを追加するか、次のいずれかの方法でお問い合わせください。

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

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

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

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