モニタ

モニタは時系列を可視化するため、リアルタイムにインタラクティブなグラフを表示できます。

モニタは、さまざまなグラフを提供します。これらは通常、WebIDE を 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
}