1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: Monitor
slug: Tools/WebIDE/Monitor
translation_of: Archive/WebIDE/Monitor
---
<div>{{ToolsSidebar}}</div><div class="summary">
<p>The WebIDE Monitor is a general-purpose data tool designed to help you track the performance of <a href="/en-US/Firefox_OS">Firefox OS</a> apps and devices.</p>
</div>
<p><img alt="The WebIDE Monitor" src="https://thefiletree.com/jan/shots/monitor/monitor.png" style="height: 464px; width: 800px;"></p>
<p>The Monitor is able to display live, interactive graphs to visualize time series.</p>
<h2 id="Available_graphs">Available graphs</h2>
<p>The Monitor comes with several different graphs. They usually show up once WebIDE is connected to a Firefox OS runtime.</p>
<h3 id="Unique_Set_Size">Unique Set Size</h3>
<p><img alt="Unique Set Size" src="https://thefiletree.com/jan/shots/monitor/uniquesetsize.png" style="height: 310px; width: 879px;"></p>
<p>This graph shows the memory footprint of all Firefox OS processes over time. If you are interested in the memory consumption of a Firefox OS app, launch it, and the private memory used by its process will be displayed here.</p>
<h2 id="Displaying_your_own_data">Displaying your own data</h2>
<p>It's relatively easy to display any kind of data in the Monitor, because it accepts loosely-formatted updates from many different sources.</p>
<h3 id="From_a_Firefox_OS_device">From a Firefox OS device</h3>
<p>You can send data from a connected device by sending observer notifications.</p>
<p>Note: If you would like to do this in a <a href="https://developer.mozilla.org/Marketplace/Options/Packaged_apps#Certified_app" title="Certified app">certified app</a>, please follow <a href="https://developer.mozilla.org/docs/Tools/WebIDE#Debugging_certified_apps" title="Debugging certified apps">these instructions</a>.</p>
<h4 id="JavaScript">JavaScript</h4>
<p><code>Services.obs.notifyObservers(null, 'devtools-monitor-update', data);</code></p>
<p>You can send data from any JS code with chrome privileges. Here is a complete example measuring the run time of some JS code:</p>
<p><code>const Services = require('Services');<br>
<br>
var start = Date.now();<br>
// code to benchmark<br>
var stop = Date.now();<br>
<br>
var data = { graph: 'Performance', myFeature: stop-start, time: stop }</code><code>;<br>
Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));</code></p>
<h4 id="C">C++</h4>
<p><code>observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);</code></p>
<p>You can send data from anywhere in Gecko. Here is a complete example measuring the run time of some code:</p>
<p><code>#include <time.h><br>
#include "nsPrintfCString.h"<br>
#include "nsIObserverService.h"<br>
<br>
clock_t start = clock();<br>
// code to benchmark<br>
clock_t stop = clock();<br>
double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);<br>
<br>
nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();<br>
if (observerService) {<br>
nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);<br>
nsAutoString data = NS_ConvertUTF8toUTF16(str);<br>
observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());<br>
}</code></p>
<h3 id="From_your_computer">From your computer</h3>
<p>You can easily send data to the Monitor over a WebSockets server. This can be useful if you're writing a Firefox extension, a command-line tool or a web service.</p>
<p>By default, the Monitor looks for a server running on the port 9000 of you computer. You can change this by updating the <code>devtools.webide.monitorWebSocketURL</code> preference.</p>
<p>You can even make it accept data from your local network, or from anywhere on the Internet.</p>
<h4 id="Node.js">Node.js</h4>
<p><code>TODO</code></p>
<h4 id="Python">Python</h4>
<p><code>TODO</code></p>
<h3 id="Supported_formats">Supported formats</h3>
<p>The Monitor accepts data in the form of JSON objects that generally look like this:</p>
<p><code>{</code><br>
<code> "graph": "myGraph",<br>
"curve": "myCurve",<br>
"value": 42,<br>
"time": 1234567890<br>
}</code></p>
<p>That format is meant to be very flexible. If a specified graph or curve doesn't exist, it will be created automatically.</p>
<h4 id="Arbitrary_names">Arbitrary names</h4>
<p>Unrecognized entries will be considered as curve name and value.</p>
<p>The smallest data packet you can send is something like:</p>
<p><code>{ "myCurve": 42 }</code></p>
<p>This will add a data point to "myCurve" in a graph with no name. The missing <code>time</code> will default to when the Monitor received the packet.</p>
<p>For better precision, it's probably better to always specify a <code>timestamp</code> for your data:</p>
<p><code>{<br>
"current": 60,</code><br>
<code> "voltage": 500,<br>
<code>"time": 1234567890</code><br>
}</code></p>
<h4 id="Multiple_values">Multiple values</h4>
<p>In a single update, you can send data for multiple curves:</p>
<p><code>{<br>
"graph": "myGraph",<br>
"myCurve1": 50,<br>
"myCurve2": 300,<br>
"myCurve3": 9000,<br>
"time": 1234567890<br>
}</code></p>
<p>Or several data points for a single curve:</p>
<p><code>{<br>
"graph": "myGraph",<br>
"curve": "myCurve",<br>
"values": [<br>
{ "time": 1234567890, "value": 42 },<br>
{ "time": 1234567981, "value": 51 }<br>
]<br>
}</code></p>
<h4 id="Multiple_updates">Multiple updates</h4>
<p>And you can also send multiple data updates as an Array:</p>
<p><code>[<br>
{ "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },<br>
{ "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }<br>
]</code></p>
<h4 id="Punctual_events">Punctual events</h4>
<p>To mark special events in a graph with a vertical bar, add an <code>event</code> key to your update:</p>
<p><code>{<br>
"graph": "myGraph",<br>
"event": "myEvent",<br>
"time": 1234567980<br>
}</code></p>
|
