現在 Canary 版である Chrome 58 では、[タイムライン] パネルが [パフォーマンス] パネルに、[プロファイル] パネルが [メモリ] パネルに変わり、[プロファイル] パネルの [JavaScript CPU プロファイルを記録する] 機能がより隠された場所に移動しました。
長期的な目標は、古い JavaScript CPU Profiler を削除し、誰もが新しいワークフローを使えるようにすることです。
この簡単な移行ガイドでは、[パフォーマンス] パネルで JS プロファイルを記録する方法と、パフォーマンス パネルの UI が使い慣れた古いワークフローにどのようにマッピングされるかについて説明します。
古い JavaScript CPU Profiler にアクセスする
[Profiles] パネルで従来の「JavaScript CPU プロファイルを記録する」ワークフローを使用しても、次のようにアクセスできます。
- DevTools のメインメニューを開きます。
- [その他のツール] > [JavaScript Profiler] を選択します。古いプロファイラが [JavaScript Profiler] という新しいパネルで開きます。
JS プロファイルを記録する方法
- DevTools を開きます。
[パフォーマンス] タブをクリックします。
図 1. [パフォーマンス] パネル。
次のいずれかの方法で録画します。
- ページ読み込みをプロファイリングするには、[ページ読み込みを記録] をクリックします。DevTools は記録を自動的に開始し、ページの読み込みが完了したことを検出すると自動的に停止します。
- 実行中のページをプロファイリングするには、[Record] をクリックし、プロファイリングするアクションを実行します。完了したら、[Stop] をクリックします。
従来のワークフローから新しいワークフローへのマッピング
以下のスクリーンショットは、古いワークフローの [グラフ] ビューにおける、新しいワークフローの CPU 使用率の概要グラフ(上の矢印)とフレーム チャート(下の矢印)の位置を示しています。
図 2. 古いワークフロー(左)と新しいワークフロー(右)のフレーム チャートのマッピング
[ヘビー(ボトムアップ)] ビューは、[ボトムアップ] タブに表示されます。
図 3. 古いワークフローのボトムアップ ビュー(左)と新しいワークフロー(右)のマッピング
また、[Call Tree] タブには [Tree (Top Down)] ビューが表示されます。
図 4. 古いワークフローのツリービュー(左)と新しいワークフロー(右)のマッピング