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

Kayce Basques

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

長期的な目標は、古い JavaScript CPU プロファイラを削除し、すべてのユーザーが新しいワークフローで作業できるようにすることです。

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

古い JavaScript CPU プロファイラにアクセスする

プロファイル パネルで利用可能だった古い「JavaScript CPU プロファイルを記録」ワークフローを希望する場合は、次のようにアクセスできます。

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

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

  1. DevTools を開きます。

  2. [掲載結果] タブをクリックします。

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

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

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

古いワークフローが新しいワークフローにどのようにマッピングされるか

下のスクリーンショットは、古いワークフローの [グラフ] ビューから、新しいワークフローの CPU 使用率の概要グラフ（上矢印）と炎グラフ（下矢印）の位置を示しています。

古いワークフローと新しいワークフローの炎グラフのマッピング。
図 2. 古いワークフローの炎グラフ（左）と新しいワークフローの炎グラフ（右）のマッピング。

[重い（ボトムアップ）] ビューは、[ボトムアップ] タブで確認できます。

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

[Call Tree] タブでは、[Tree (Top Down)] ビューを使用できます。

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

記載されていない機能がある場合や、この記事について他にご不明な点がある場合は、Twitter で @ChromeDevTools に連絡するか、ドキュメント リポジトリで GitHub の問題を報告してください。