ChromeでJavaScriptのメモリ使用量を確認する

ChromeでJavaScript実行時のメモリを確認したかったので、

いくつかの方法を試してみました。(操作環境はMacです)

 

1.タブ毎のメモリ使用量を確認

Chromeの設定ボタン(右上にある「:」のようなボタン)→「その他ツール」→「タスクマネージャ」からタスクマネージャを開きます。

(メニューからの場合は「ウィンドウ」→「タスクマネージャ」)

 

タスクマネージャ上のリストヘッダーを右クリックして、コンテキストメニューの一覧から「JavaScriptメモリ」を選択すると、タブ毎のJavaScriptが使用しているメモリ量が表示されます。

 

2.ヒープの状態を確認

Chromeの設定ボタン(右上にある「:」のようなボタン)→「その他ツール」→「デベロッパーツール」からデベロッパーツールを開きます。

(メニューからの場合は「表示」→「開発/管理」→「デベロッパーツール」)

 

「Memory」タブを選択すると、プロファイリングを選択できるので、「Take heap snapshot」を選択して「Tak snapshot」ボタンをクリックします。

ヒープのスナップショットが作成されるので、そのページで作成されたオブジェクトやイベントなどが参照できます。

また、デベロッパーツールの左上ぐらいにある「●」を押すと、再度スナップショットが取得できるので、何かしらページの操作を行う前と後でヒープの状態を比較することができます。

複数のスナップショットを作成した後、スナップショットアイコンの右にある「Summary」を「Comparison」に変更して、「Class filter」の右側の対象のスナップショット名を比較したいスナップショットのものに変えると比較結果が表示されます。

 

3.ページ操作時のメモリの状態を確認

デベロッパーツールの「Performance」タブを選択すると、「Memory」タブと同様に左側に「●」アイコンが表示されるので、それをクリックするとそのページにおける動作を計測してくれます。

その後ページの操作などを行ってから「Stop」ボタンをクリックすると、時系列毎のスナップショットやヒープの使用量などがグラフで表示されます。

2018-03-31 18:39:48