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 class="summary">
<p>El WebIDE Monitor es una herramienta de datos de propósito general diseñada para ayudar a controlar el desempeño de las aplicaciones y dispositivos <a href="https://developer.mozilla.org/en-US/Firefox_OS">Firefox OS</a>.</p>
</div>
<p><img alt="The WebIDE Monitor" src="https://thefiletree.com/jan/shots/monitor/monitor.png" style="height: 464px; width: 800px;"></p>
<p>El Monitor es capaz de mostrar gráficos interactivos en tiempo real para visualizar series de tiempo.</p>
<h2 id="Gráficos_disponibles">Gráficos disponibles</h2>
<p>El Monitor viene con algunos gráficos diferentes. Ellos se muestran usualmente una vez que el WebIDE es conectado a un Firefox OS runtime.</p>
<h3 id="Selección_de_medida_única">Selección de medida única</h3>
<p><img alt="Unique Set Size" src="https://thefiletree.com/jan/shots/monitor/uniquesetsize.png" style="height: 310px; width: 879px;"></p>
<p>Este gráfico muestra el footprint de la memoria de todos los procesos de Firefox OS a través del tiempo. Si quieres saber el consumo de memoria de una app de Firefox OS, lanzalo y podrás ver la memoria privada usada por el proceso.</p>
<h2 id="Mostrando_tus_propios_datos">Mostrando tus propios datos</h2>
<p>Es relativamente fácil mostrar cualquier tipo de dato en el Monitor, porque acepta actualizaciones de forma-libre desde muchos orígenes diferentes.</p>
<h3 id="Desde_un_dispositivo_Firefox_OS">Desde un dispositivo Firefox OS</h3>
<p>Es posible enviar datos desde un dispositivo conectado enviando notificaciones de observación.</p>
<p>Nota: Si quieres hacer esto en una <a href="https://developer.mozilla.org/Marketplace/Options/Packaged_apps#Certified_app" title="Certified app"> aplicación certificada</a>, por favor sigue <a href="https://developer.mozilla.org/docs/Tools/WebIDE#Debugging_certified_apps" title="Debugging certified apps">las siguientes instrucciones</a>.</p>
<h4 id="JavaScript">JavaScript</h4>
<p><code>Services.obs.notifyObservers(null, 'devtools-monitor-update', data);</code></p>
<p>Puedes enviar datos desde cualquier código Javascript con privilegios de chrome. Aqui hay un ejemplo completo midiendo el run time de un codigo en Javascript:</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>Puedes enviar datos desde cualquier parte en Gecko. Aqui hay un ejemplo completo midiendo el run time de un codigo:</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="Desde_el_computador">Desde el computador</h3>
<p>Puedes facilmente enviar datos al Monitor sobre un servidor WebSocket. Esto puede ser útil si estás escribiendo una extensión para Firefox, una herramienta de línea de comandos o un servicio web..</p>
<p>Por defecto, el Monitor busca un servidor corriendo en el puerto 9000 de tu computador. Puedes cambiar esto actualizando las preferencias en <code>devtools.webide.monitorWebSocketURL</code>.</p>
<p>Incluso puedes hacer que acepte datos desde tu red local, o desde cualquier parte de 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="Formatos_soportados">Formatos soportados</h3>
<p>El Monitor acepta datos en formato de objetos JSON que generalmente lucen similares a esto:</p>
<p><code>{</code><br>
<code> "graph": "myGraph",<br>
"curve": "myCurve",<br>
"value": 42,<br>
"time": 1234567890<br>
}</code></p>
<p>Ese formato está destinado a ser muy flexible. Si no existe un gráfico o curva especificada , se creará automáticamente.</p>
<h4 id="Nombres_arbitrarios">Nombres arbitrarios</h4>
<p>Las entradas no reconocidas serán consideradas como curvas de nombre y valor.</p>
<p>El paquete de datos más pequeño que puedes enviar es algo como:</p>
<p><code>{ "myCurve": 42 }</code></p>
<p>Esto añadirá un punto de datos para "<code>myCurve</code>" en un gráfico sin nombre. El tiempo faltante será por defecto cuando el monitor recibe el paquete .</p>
<p>Para mayor precisión, es probablemente mejor especificar un <code>timestamp</code> para tus datos:</p>
<p><code>{<br>
"current": 60,</code><br>
<code> "voltage": 500,<br>
<code>"time": 1234567890</code><br>
}</code></p>
<h4 id="Multiples_variables">Multiples variables</h4>
<p>En una simple actualización, puedes enviar datos para multiples curvas:</p>
<p><code>{<br>
"graph": "myGraph",<br>
"myCurve1": 50,<br>
"myCurve2": 300,<br>
"myCurve3": 9000,<br>
"time": 1234567890<br>
}</code></p>
<p>O varios puntos de datos para una sola curva:</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="Múltiples_actualizaciones">Múltiples actualizaciones</h4>
<p>Y también puedes enviar multiples actualizaciones de datos en forma de un 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="Eventos_puntuales">Eventos puntuales</h4>
<p>Para marcar eventos especiales en un gráfico con una barra vertical, agrega una clave <code>event</code> a tu actualización:</p>
<p><code>{<br>
"graph": "myGraph",<br>
"event": "myEvent",<br>
"time": 1234567980<br>
}</code></p>
|
