Meteor Fan (日本語情報)

JavaScriptフレームワークMeteorに関していろいろ紹介する日本語情報サイト

Kadira DebugでMeteorアプリのデバッグ

Meteorアプリのパフォーマンス向上を支援するKadira Platformというサービスがあります。

Kadira Platformは下図のように複数のツールから構成されています。

Kadira Platform

この中のKadira Debugというツールを紹介します。

Kadira Debug

Kadira DebugはKadira Platformの中で開発段階で使うツールです。メインのツールはプロダクション段階で使うもののようです。Kadira Platformは基本的にサインアップして使うツールなのですが、Kadira Debugはサインアップ不要で使えるので手軽です。

現時点では無料で使えるようですが、完全にオープンソースというわけではありません。Meteorアプリに組み込むパッケージはMITライセンスですが、UIのコードはオープンソースではありません。

インストール方法

Meteorアプリに組み込むパッケージのインストールは次のようにします。

meteor add kadira:debug

このパッケージはdebugOnlyであるためプロダクション段階では組み込まれません。

起動方法

Meteorアプリをいつも通り起動したら、

http://debug.kadiraio.com/debug

にアクセスします。

screenshot

このような画面が出たら、テキストフィールドにアプリのURLを入力します。例えば、

http://localhost:3000/

がよくあるケースでしょう。その後Connectボタンを押すと起動完了です。

機能説明

Event Stream

“Event Stream”はMeteorアプリ内で起こっているイベントを表示する機能です。イベントには、ルート変更、メソッド呼び出し、Subscription、データ更新、DOMイベントなどがあります。これらをフィルタで見たいものだけに制限することができます。

  • Route: アプリ内でのルートの変更
  • Sub: アプリ内でのSubscriptionの実行
  • Rready: サーバがSubscriptionを受け付けた時
  • Unsub: Subscriptionの解除要求
  • Nosub: Subscriptionが停止した時
  • Method: アプリ内でMethod呼び出しの実行
  • Updated: サーバがUpdatedメッセージを送った時 参照
  • Live Updates: サーバから来たデータ更新
  • HCR: ホットコードリロードが起こった時

Blaze Monitoring

“Client Activities”にはBlazeで実行された処理と時間が表示されます。

下記のようなBlazeの処理を見ることができます。

  • テンプレートを作成したり削除したりする時間
  • DOMエレメントを作成したり削除したりする時間
  • ヘルパー実行、autorun、描画コールバックにかかる時間

これによりどのテンプレートが作成と削除が頻繁に発生しているかが分かり、それをもとに改善することができます。

CPU Monitoring

クライアントコードの負荷を知ることも重要です。”Client Activities”にはイベントループのブロック度合(%)が表示されます。もし急激な増加を見つけたら、その際にどのような動作やイベントがあったか調べることができるでしょう。根本的な原因を探るのに役立つはずです。

実はCPU利用率は直接は計測できませんが、ブロック度合を観測することでそれなりに追跡することができます。仮にeventloop blocknessが40%だとすると40%の時間は何からの理由でアプリが忙しいという意味です。その理由には他のプロセスの動作も含まれます。

CPU Profiling

CPUプロファイリングを使うと具体的にコードのどの部分がボトルネックかを知ることができます。CPUプロファイルを取得した後にKadiraのアナライザで読み込んで解析することができます。

サーバサイドのCPUプロファイルを取得するには、下記のパッケージを利用します。

meteorhacks:kadira-profiler

さらに、

export KADIRA_PROFILE_LOCALLY=1

の設定をして、アプリを起動し、ブラウザのコンソールから、

Kadira.profileCpu(10)

を実行すると、10秒おきにプロファイルが保存されます。

一方、クライアントサイドのCPUプロファイルを取得するには、Chromeのプロファイリングツールを使います。プロファイル取得後にSaveボタンで保存することでファイルに書き出します。

まとめ

以上がKadira Debugの簡単な説明です。残念ながら、細かい使い方には踏み込めていません。具体的な使い方は、Kadira Debugのページを参照してください。