[JavaScript Profiler] パネルは Chrome 124 で廃止されます。今後、Node.js の CPU パフォーマンスのプロファイリングには [Performance] パネルを使用します。
JavaScript Profiler のサポートを終了するのはなぜですか?(JS Profiler)
Chrome 58 以降、DevTools チームは最終的に JS Profiler のサポートを終了する予定です。これには次のような理由があります。
- 現在は積極的に開発されていません。JS プロファイラはここ数年大きなアップデートがまったくなく、チームには開発を続けるためのリソースもありません。
- プロファイリングの効率化。[Performance] パネルはすでに、あらゆる種類のパフォーマンス分析に使用されています。Node.js で JavaScript の CPU パフォーマンスをプロファイリングできるため、一貫性と効率を高めるためにすべてを 1 か所に統合するのが合理的です。
- パフォーマンス パネルが改善されている。今後も新機能や機能強化を追加し、パフォーマンス分析のためのよりパワフルでユーザー フレンドリーなツールにしていきます。
サポートの終了後にすべきこと
JavaScript の CPU パフォーマンスをプロファイリングする方法については、Node.js のパフォーマンスをプロファイリングするをご覧ください。
[パフォーマンス] パネルを使用する際のヒントは次のとおりです。
- フレームチャートを使用して、パフォーマンスのボトルネックを特定します。
- [ボトムアップ] タブと [呼び出しツリー] タブを使用して、関数間の関係を理解します。
非推奨にどのように対応すればよいですか?
Google はプロトタイプを開発し、コメントのリクエスト(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 動画にコメントを残してください。