Chrome DevTools - JavaScript CPU プロファイリング（Chrome 58）

ケイス・バスクス
Kayce Basques
Twitter GitHub Glitch

現在 Canary 版である Chrome 58 では、[タイムライン] パネルが [パフォーマンス] パネルに、[プロファイル] パネルが [メモリ] パネルに変わり、[プロファイル] パネルの [JavaScript CPU プロファイルを記録] 機能がより隠された場所に移動しました。

長期的な目標は、古い JavaScript CPU Profiler を削除し、誰もが新しいワークフローを使用できるようにすることです。

この簡単な移行ガイドでは、[パフォーマンス] パネルで JS プロファイルを記録する方法と、パフォーマンス パネルの UI が使い慣れた古いワークフローにどのようにマッピングされるかについて説明します。

古い JavaScript CPU Profiler にアクセスする

これまで [プロファイル] パネルで使用されていた古い「JavaScript CPU プロファイルの記録」ワークフローを使用しても、次のようにアクセスできます。

  1. DevTools のメインメニューを開きます。
  2. [その他のツール] > [JavaScript Profiler] を選択します。古いプロファイラが [JavaScript Profiler] という新しいパネルで開きます。

JS プロファイルを記録する方法

  1. DevTools を開きます。

  2. [パフォーマンス] タブをクリックします。

    Chrome DevTools のパフォーマンス パネル。
    図 1. [パフォーマンス] パネル

  3. 次のいずれかの方法で録画します。

    • ページ読み込みをプロファイリングするには、[ページ読み込みを記録] をクリックします。DevTools は記録を自動的に開始し、ページの読み込みが完了したことを検出すると自動的に停止します。
    • 実行中のページをプロファイリングするには、[Record] をクリックし、プロファイリングするアクションを実行します。完了したら、[Stop] をクリックします。

従来のワークフローから新しいワークフローへのマッピング

以下のスクリーンショットは、古いワークフローの [グラフ] ビューにおける、新しいワークフローの CPU 使用率の概要グラフ（上の矢印）とフレーム チャート（下の矢印）の位置を示しています。

古いワークフローと新しいワークフローのフレーム チャートをマッピングしています。
図 2. 古いワークフローのフレーム チャート（左）と新しいワークフロー（右）のマッピング。

[ヘビー（ボトムアップ）] ビューは、[ボトムアップ] タブに表示されます。

古いワークフローと新しいワークフローのボトムアップ ビューとのマッピング。
図 3. 古いワークフローのボトムアップ ビュー（左）と新しいワークフロー（右）のマッピング。

また、[Call Tree] タブには [Tree (Top Down)] ビューが表示されます。

古いワークフローと新しいワークフローのツリービューとのマッピング
図 4. 古いワークフローのツリービュー（左）と新しいワークフロー（右）のマッピング。

Twitter で @ChromeDevTools に ping してください。機能が不足している場合や、この記事に関するその他の質問がある場合は、ドキュメント リポジトリで GitHub の問題を開きます。