WebIDE のモニタは、Firefox OS アプリや端末のパフォーマンスの追跡を支援するように設計された汎用データツールです。
モニタは時系列を可視化するため、リアルタイムにインタラクティブなグラフを表示できます。
使用可能なグラフ
モニタは、さまざまなグラフを提供します。これらは通常、WebIDE を Firefox OS のランタイムに接続したときから表示します。
Unique Set Size
このグラフは、すべての Firefox OS プロセスのメモリフットプリントを時系列で表示します。Firefox OS アプリのメモリ消費に関心がある場合はこのグラフを表示すれば、アプリのプロセスが使用するプライベートメモリが表示されます。
独自データを表示する
モニタは多くのさまざまな発信元から自由な形式のデータを受け入れますので、どのような種類のデータでも比較的容易に表示できます。
Firefox OS デバイスから
Observer 通知の送信により、接続した端末からデータを送信できます。
注記: 認定アプリでこれを行いたい場合は、こちらの手順に従ってください。
Services.obs.notifyObservers(null, 'devtools-monitor-update', data);
chrome 権限を持つ JS コードから、データを送信できます。ある JS コードの実行時間を測定する例を示します:
JavaScript
const Services = require('Services');
var start = Date.now();
// code to benchmark
var stop = Date.now();
var data = { graph: 'Performance', myFeature: stop-start, time: stop };
Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));
C++
observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);
Gecko のどこからでもデータを送信できます。あるコードの実行時間を測定する例を示します:
#include <time.h>
#include "nsPrintfCString.h"
#include "nsIObserverService.h"
clock_t start = clock();
// code to benchmark
clock_t stop = clock();
double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);
nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();
if (observerService) {
nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);
nsAutoString data = NS_ConvertUTF8toUTF16(str);
observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());
}
コンピュータから
WebSocket サーバを通して、簡単にモニタへデータを送信できます。Firefox の拡張機能、コマンドラインツール、Web サービスを作成する場合に役立つでしょう。
デフォルトでは、モニタはコンピュータの 9000 番ポートで実行するサーバを見ています。これは、設定項目 devtools.webide.monitorWebSocketURL
で変更できます。
モニタはローカルネットワーク内だけでなく、インターネットのどこからでもデータを受け入れるようにすることができます。
Node.js
TODO
Python
TODO
サポートする形式
モニタは、概ね以下のような JSON オブジェクト形式のデータを受け入れます:
{
"graph": "myGraph",
"curve": "myCurve",
"value": 42,
"time": 1234567890
}
この形式は高い柔軟性を持たせようとするものです。指定されたグラフが存在しない場合は、自動的に作成します。
任意の名称
認識できない項目は、グラフの名称と値であるとみなします。
送信可能な最小のパケットは以下のようなものです:
{ "myCurve": 42 }
これは無名のグラフの "myCurve" に、データポイントを追加します。time
がない場合の既定値は、モニタがパケットを受け取った時刻です。
精度を高めるため、データで常に timestamp
を指定するとよいでしょう:
{
"current": 60,
"voltage": 500,
"time": 1234567890
}
複数の値
1 回の更新で、複数のグラフのデータを送信できます:
{
"graph": "myGraph",
"myCurve1": 50,
"myCurve2": 300,
"myCurve3": 9000,
"time": 1234567890
}
または、ひとつのグラフに複数のデータポイントを示すことができます:
{
"graph": "myGraph",
"curve": "myCurve",
"values": [
{ "time": 1234567890, "value": 42 },
{ "time": 1234567981, "value": 51 }
]
}
複数の更新
配列形式で、複数の更新データを送信することもできます:
[
{ "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },
{ "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }
]
時間指定のイベント
グラフ内の垂直線で特定のイベントを示すため、更新データに event
キーを付加します:
{
"graph": "myGraph",
"event": "myEvent",
"time": 1234567980
}