diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
| commit | a065e04d529da1d847b5062a12c46d916408bf32 (patch) | |
| tree | fe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/es/tools/webide/monitor | |
| parent | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff) | |
| download | translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.gz translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.bz2 translated-content-a065e04d529da1d847b5062a12c46d916408bf32.zip | |
update based on https://github.com/mdn/yari/issues/2028
Diffstat (limited to 'files/es/tools/webide/monitor')
| -rw-r--r-- | files/es/tools/webide/monitor/index.html | 158 |
1 files changed, 0 insertions, 158 deletions
diff --git a/files/es/tools/webide/monitor/index.html b/files/es/tools/webide/monitor/index.html deleted file mode 100644 index c48c5a8d06..0000000000 --- a/files/es/tools/webide/monitor/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -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> |
