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
159
160
161
162
|
---
title: Monitor
slug: Outils/WebIDE/Monitor
translation_of: Archive/WebIDE/Monitor
---
<div>{{ToolsSidebar}}</div><div class="warning">
<p><span style="color: #000000;">Le Moniteur WebIDE a été supprimé dans panel Firefox 60+. Ce panneau n'était utilisé que pour feu Firefox OS (puisses-tu reposer en paix).</span></p>
</div>
<div class="summary">
<p>Le Moniteur WebIDE est un outil de visualisation de données génériques fait pour aider à vérifier les performances des applications et appareils<a href="/fr/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>Le Moniteur peut afficher des graphiques interactifs en temps réel.</p>
<h2 id="Graphiques_disponibles">Graphiques disponibles</h2>
<p>Le Moniteur dispose de plusieurs types de graphiques différents, ceux-ci s'affichent dès que le WebIDE est connecté à un runtime Firefox OS.</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>Ce graphique affiche l'impact de l'utilisation mémoire de tous les processus Firefox OS. Si vous êtes intéressés par la consommation mémoire d'une application Firefox OS, lancez celle-ci et la mémoire privée utilisée par ses processus sera affiché ici.</p>
<h2 id="Afficher_vos_propres_données">Afficher vos propres données</h2>
<p>Il est relativement simple d'afficher n'importe quel type de données dans le Moniteur, car il accepte des mises à jour peu structurées depuis un grand nombre de sources différentes.</p>
<h3 id="Depuis_un_appareil_Firefox_OS">Depuis un appareil Firefox OS</h3>
<p>Il est possible d'envoyer des données depuis un appareil connecté en envoyant des notifications d'observation (observer notifications).</p>
<p>Note: Si vous voulez faire ceci sur une <a href="https://developer.mozilla.org/Marketplace/Options/Packaged_apps#Certified_app" title="Certified app">application certifiée</a>, suivez <a href="https://developer.mozilla.org/docs/Tools/WebIDE#Debugging_certified_apps" title="Debugging certified apps">ces instructions.</a></p>
<pre><code>Services.obs.notifyObservers(null, 'devtools-monitor-update', data);</code></pre>
<p>Il est passible d'envoyer des données depuis n'importe quel code JS ayant les privilèges chrome. Voici un exemple concret qui mesure le temps d'exécution de code JavaScript :</p>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">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));</pre>
<h4 id="C">C++</h4>
<pre class="brush: cpp">observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);</pre>
<p>Il est possible d'envoyer des données depuis n'importe ou dans Gecko. Voici un exemple concret mesurant le temps d'exécution d'un code :</p>
<pre class="brush: cpp">#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());
}</pre>
<h3 id="Depuis_votre_ordinateur">Depuis votre ordinateur</h3>
<p>Il est facile d'envoyer des données au Moniteur en passant par un serveur WebSockets. Cela peut être utile si vous concevez une extension de Firefox, comme un outil de ligne de commande ou un service web.</p>
<p>Par défaut, le Moniteur écoute les serveurs tournant sur le port 9000 de votre ordinateur. Il est possible de changer ce port en mettant à jour la préférence <code>devtools.webide.monitorWebSocketURL</code>.</p>
<p>Il est même possible de lui faire accepter des données depuis votre réseau local ou depuis n'importe ou sur internet.</p>
<h4 id="Node.js">Node.js</h4>
<pre class="brush: js">TODO</pre>
<h4 id="Python">Python</h4>
<pre class="brush: python">TODO</pre>
<h3 id="Formats_supportés">Formats supportés</h3>
<p>Le Moniteur accepte des données sous la forme d'objets JSON qui ressemblent généralement à ceci :</p>
<pre class="brush: json">{
"graph": "myGraph",
"curve": "myCurve",
"value": 42,
"time": 1234567890
}</pre>
<p>Ce format est fait pour être très flexible. Si un graphique ou une courbe n'est pas défini, elle sera créée automatiquement.</p>
<h4 id="Noms_arbitraires">Noms arbitraires</h4>
<p>Les données non reconnues seront considérées comme un nom de courbe et sa valeur.</p>
<p>Le plus petit paquet de données que vous pouvez envoyer ressemble à ceci :</p>
<pre class="brush: json">{ "myCurve": 42 }</pre>
<p>Cela ajoutera un point de donnée à "myCurve" dans le graph sans nom. Le paramètre <code>time</code> manquant sera automatiquement celui du moment ou le paquet est reçu.</p>
<p>Pour plus de précession, il est recommandé de toujours spécifier un a <code>timestamp</code> pour vos données :</p>
<pre class="brush: json">{
"current": 60,
"voltage": 500,
"time": 1234567890
}</pre>
<h4 id="Valeurs_Multiples">Valeurs Multiples</h4>
<p>Dans une seule mise à jour, il est possible d'envoyer des données pour plusieurs courbes :</p>
<pre class="brush: json">{
"graph": "myGraph",
"myCurve1": 50,
"myCurve2": 300,
"myCurve3": 9000,
"time": 1234567890
}</pre>
<p>Ou plusieurs points pour une même courbe :</p>
<pre class="brush: json">{
"graph": "myGraph",
"curve": "myCurve",
"values": [
{ "time": 1234567890, "value": 42 },
{ "time": 1234567981, "value": 51 }
]
}</pre>
<h4 id="Mises_à_jour_multiples">Mises à jour multiples</h4>
<p>Il est également possible d'envoyer plusieurs mises a jour de données dans un tableau :</p>
<pre class="brush: json">[
{ "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },
{ "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }
]</pre>
<h4 id="Évènements_ponctuels">Évènements ponctuels</h4>
<p>Pour marquer des évènements spéciaux dans un graph avec une barre verticale, il faut ajouter une clé <code>event</code> dans la mise à jour :</p>
<pre class="brush: json">{
"graph": "myGraph",
"event": "myEvent",
"time": 1234567980
}</pre>
|
