aboutsummaryrefslogtreecommitdiff
path: root/files/fr/tools/web_console/console_messages/index.html
blob: dbf34270a4fa42def0e17c27e09770f92470e2ad (plain)
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
---
title: Console messages
slug: Tools/Web_Console/Console_messages
translation_of: Tools/Web_Console/Console_messages
original_slug: Outils/Console_Web/Console_messages
---
<div>{{ToolsSidebar}}</div>

<p>La majorité de la Console Web est occupée par le panneau d'affichage des messages :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13278/console-messages.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 877px;"></p>

<p>Chaque message est affiché sur une nouvelle ligne.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; height: 152px; margin-left: auto; margin-right: auto; width: 795px;"></p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Temps</th>
   <td>La date et heure à laquelle le message a été enregistré. Cette information n'est pas affichée par défaut, et vous pouvez demander de l'afficher en utilisant un paramètre de la Boite d'outils</td>
  </tr>
  <tr>
   <th scope="row">Catégorie</th>
   <td>
    <p>Indique le type de message :</p>

    <ul>
     <li><strong>Noir </strong>: Requête HTTP</li>
     <li><span style="color: #0099ff;"><strong>Bleu </strong></span> : Avertissement/erreur CSS</li>
     <li><strong><span style="color: #ff8c00;">Orange </span></strong> : Avertissement/erreur JavaScript</li>
     <li><span style="color: #ff0000;"><strong>Rouge</strong></span> : Avertissement/erreur de sécurité</li>
     <li>Vert : Logs serveur</li>
     <li><span style="color: #a9a9a9;"><strong>Gris léger </strong></span> : Message de l'API <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">Console</a></li>
     <li><span style="color: #696969;"><strong>Gris foncé</strong></span> : Messages d'entrées/sorties de la <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter">ligne de commande JavaScript</a></li>
    </ul>
   </td>
  </tr>
  <tr>
   <th scope="row">Type</th>
   <td>Pour tous les messages sauf les requêtes HTTP et les messages d'entrées/sorties, une icône indique s'il s'agit d'une erreur (☓), d'un avertissement (⚠), ou d'un message informatif</td>
  </tr>
  <tr>
   <th scope="row">Message</th>
   <td>Le message lui-même</td>
  </tr>
  <tr>
   <th scope="row">Nombre d’occurrences</th>
   <td>Si une ligne générant un avertissement ou une erreur apparait plus d'une fois, elle ne sera enregistrée qu'une fois, et ce compteur apparaitra pour indiquer le nombre de fois qu'elle a été rencontrée</td>
  </tr>
  <tr>
   <th scope="row"><strong>Nom du fichier et numéro de ligne</strong></th>
   <td>
    <p>Pour JavaScript, CSS et les messages de l'API console, le message peut être associé à une ligne de code spécifique. La console fournit alors un lien vers le nom du fichier et le numéro de ligne qui a généré le message.</p>

    <p>Depuis Firefox 36, cela inclut le nombre de colones également.</p>
   </td>
  </tr>
 </tbody>
</table>

<p>Par défaut, la console est effacée à chaque fois que vous naviguez sur une nouvelle page ou que vous rechargez la page courante. Pour modifier ce comportement, cochez "Activer les journaux persistants" dans les paramètres de la Boite à outils.</p>

<h2 id="Categories_de_messages">Categories de messages</h2>

<h3 id="Requêtes_réseau">Requêtes réseau</h3>



<div class="note">
<p style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px;"><span style="color: #000000;">Les messages réseau ne sont pas affichés par défaut. Il faut utiliser la fonctionnalité de <a href="/fr/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtrage</a> pour les afficher.</span></p>
</div>



<p>Les requêtes résseau sont affichées sous cette forme :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; height: 139px; margin-left: auto; margin-right: auto; width: 664px;"></p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Temps</th>
   <td>La date et heure à laquelle le message a été enregistré</td>
  </tr>
  <tr>
   <th scope="row"><strong>Catégorie</strong></th>
   <td>Indique que ce message concerne une requête HTTP</td>
  </tr>
  <tr>
   <th scope="row"><strong>Méthode</strong></th>
   <td>
    <p>La méthode HTTP utilisée</p>

    <p>Si la requête à été faite avec <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, il y a une notre aditionelle :</p>

    <p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p>
   </td>
  </tr>
  <tr>
   <th scope="row"><strong>URI</strong></th>
   <td>L'URI cible</td>
  </tr>
  <tr>
   <th scope="row"><strong>Résumé</strong></th>
   <td>La version HTTP, le code de statut, et le temps qu'il a fallu pour la terminer</td>
  </tr>
 </tbody>
</table>

<p>Si vous cliquez sur le message, vous verrez une fenêtre contenant plus de détails sur la requête et la réponse :</p>

<p>Défiler vers le bas révèle les en-têtes de réponses. Par défaut, la Console Web n'enregistre pas les contenus de la requête et la réponse : pour le faire, activez le menu contextuel de la Console Web et choisissez "Journaliser le contenu des requêtes et des réponses". Rechargez la page, et vous les verrez dans cette fenêtre d'inspection.</p>

<p>Seul le premier méga-octet de données est enregistré pour le contenu de chaque requête ou réponse. Les requêtes et les réponses très lourdes seront tronquées.</p>

<p>Les logs de messages réseaux ne sont pas montrés par defaut. Utiliser la fonction filtre pour les afficher.</p>

<h4 id="XHR">XHR</h4>

<p>From Firefox 38 onwards, the Web Console indicates when a network request was made as an <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p>

<p>Also from Firefox 38 onwards, you can <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Filtering_and_searching">filter</a> the network requests so as to only see XMLHttpRequests.</p>

<p>Like normal network request log messages, logs of XMLHttpRequests are not shown by default. Use the <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Filtering_and_searching">filtering</a> feature to show them.</p>

<h3 id="Erreurs_et_avertissements_JavaScript">Erreurs et avertissements JavaScript</h3>

<p>Les messages JavaScript ressemblent à :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="sect1"></h3>

<h3 id="Erreurs_CSS_avertissements_et_évènements_de_reflow">Erreurs CSS, avertissements et évènements de <em>reflow</em></h3>

<p>Les messages CSS ressemblent à ceci :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>Par défaut, les avertissements CSS ne sont pas affichés.</p>

<h4 id="Évènements_de_reflow">Évènements de reflow</h4>

<p>La Console Web logue aussi les évènements de reflow. Un reflow est le nom donné à une opération pendant laquelle le navigateur calcule la disposition de tout ou partie de la page.<br>
 Les reflows se produisent lorsqu'un changement est arrivé dans la page et que la navigateur pense qu'il en affecte la disposition. Plusieurs évènements peuvent déclencher des reflows, incluant : redimensionner la fenêtre du navigateur, activer des pseudo-classes comme :hover ou manipuler le DOM en JavaScript.<br>
 <br>
 Parce que les reflows peuvent être très coûteux en calculs et affecter directement l'interface utilisateur, ils peuvent avoir un grand impact sur la réactivité d'un site ou d'une application web. En loguant les évènements de reflow, la Console Web peut vous donner une idée du moment auquel ces évènements sont déclenchés, combien de temps ils prennent à s'exécuter et si les reflows sont synchrones et déclenchés par du JavaScript, quel code les a déclenchés.<br>
 <br>
 Les évènements de reflow sont affichés dans la catégorie CSS, en tant que messages "Log", bien séparés des erreurs et avertissements CSS. Par défaut, ils sont désactivés. Vous pouvez les activer en cliquant sur le bouton "CSS" dans la boite à outils et en sélectionnant "Log".<br>
 <br>
 Chaque message porte une étiquette "reflow" et montre le temps qui a fallu pour exécuter le reflow :<br>
 <br>
 <img alt="" src="https://mdn.mozillademos.org/files/7087/web-console-reflow-asynch.png" style="height: 53px; width: 554px;"><br>
 Si le reflow est synchrone et a été déclenché par du JavaScript, un lien vers la ligne de code qui a déclenché le reflow est aussi affiché :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7089/web-console-reflow-synch.png"><br>
 Cliquez sur le lien pour ouvrir le fichier dans le <a href="/fr/docs/Tools/Debugger">Débogueur</a>.</p>

<h4 id="Reflows_synchrones_et_asynchrones">Reflows synchrones et asynchrones</h4>

<p>Si un changement est fait et qu'il invalide la disposition courante - par exemple, la fenêtre du navigateur est redimensionnée ou du JavaScript modifie le CSS d'un élément - la disposition n'est pas recalculée immédiatement. A la place, le reflow se produit de façon asynchrone, lorsque le navigateur décide que cela est nécessaire ; en général, lorsque le navigateur redessine ("repaint"). De cette façon, le navigateur peut enregistrer une série de changements invalidants et recalculer leurs effets en une seule fois. Cependant, si du code JavaScript lit un style qui a été modifié, alors le navigateur doit réaliser un reflow synchrone pour calculer le style calculé ("<em>computed style</em>") à retourner.</p>

<p>Par exemple, le code suivant provoque un reflow immédiat et synchrone au moment de l'appel à window.getComputedStyle(thing).height :</p>

<pre class="brush: js notranslate"><code class="language-js"><span class="keyword token">var</span> thing <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById<span class="punctuation token">(</span></span><span class="string token">"the-thing"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
thing<span class="punctuation token">.</span>style<span class="punctuation token">.</span>display <span class="operator token">=</span> <span class="string token">"inline-block"</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> thingHeight <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">getComputedStyle<span class="punctuation token">(</span></span>thing<span class="punctuation token">)</span><span class="punctuation token">.</span>height<span class="punctuation token">;</span></code>
</pre>

<p>A cause de cela, c'est une bonne idée d'éviter l'entrelacement des appels en écriture et en lecture des styles d'un élément lors de la manipulation du DOM, parce que chaque fois que vous relisez un style qui a été invalidé par un précédent appel en écriture, vous forcez un reflow synchrone.</p>

<h3 id="Avertissements_et_erreurs_de_sécurité">Avertissements et erreurs de sécurité</h3>

<p>Les avertissements et les erreurs de sécurité ressemblent à ceci :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">Les messages de sécurité affichés dans la console web aident les développeurs à trouver les vulnérabilités de leur site qu’elles soient potentielles ou effectives. De plus, beaucoup de ces messages sont enrichissants pour les développeurs car ils finissent par un lien "En savoir plus" qui redirige sur une page contenant des informations et des conseils pour minimiser le problème.</p>

<p>La liste complète des messages de sécurité est la suivante :</p>

<table class="standard-table" style="width: auto;">
 <tbody>
  <tr>
   <th scope="col">Message</th>
   <th scope="col">Details</th>
  </tr>
  <tr>
   <td>Blocage du chargement du contenu mixte actif</td>
   <td>La page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td>
  </tr>
  <tr>
   <td>Blocage du chargement du contenu mixte non actif</td>
   <td>La page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td>
  </tr>
  <tr>
   <td>Chargement de contenu mixte actif (non sécurisé) sur une page sécurisée</td>
   <td>La page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td>
  </tr>
  <tr>
   <td>Chargement de contenu mixte non actif (non sécurisé) sur une page sécurisée</td>
   <td>La page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td>
  </tr>
  <tr>
   <td>Le site spécifie un en-tête   X-Content-Security-Policy/Report-Only et un en-tête Content-Security-Policy/Report-Only. L’en-tête X-Content-Security-Policy/Report-Only sera ignoré.</td>
   <td>Voir <a href="/fr/docs/Security/CSP">Content Security Policy</a> pour plus de détails.</td>
  </tr>
  <tr>
   <td>Les en-tête X-Content-Security-Policy X-Content-Security-Report-Only seront dépréciés dans le futur. Merci d'utiliser les en-têtes Content-Security-Policy et Content-Security-Report-Only avec les spécificités CSP à la place.</td>
   <td>Voir <a href="/fr/docs/Security/CSP">Content Security Policy</a> pour plus de détails.</td>
  </tr>
  <tr>
   <td>Champs mot de passe présents sur une page non sécurisée (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.</td>
   <td>Les pages contenant des formulaires de connexion doivent être servis en HTTPS et non en HTTP.</td>
  </tr>
  <tr>
   <td>Champs mot de passe présents sur un formulaire non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.</td>
   <td>Les formulaires contenant des champs de mot de passe doivent les envoyer en HTTPS et non en HTTP.</td>
  </tr>
  <tr>
   <td>Champs mot de passe présents dans un iframe non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.</td>
   <td>Les pages comprenant des iframes qui contiennent des formulaires de connexion doivent être servis en HTTPS et non en HTTP.</td>
  </tr>
  <tr>
   <td>Le site a spécifié un en-tête Strict-Transport-Security invalide.</td>
   <td>Voir <a href="/fr/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> pour plus d'informations</td>
  </tr>
  <tr>
   <td>
    <div class="geckoVersionNote">
    <p>New in Firefox 36</p>
    </div>

    <p>This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.</p>
   </td>
   <td>
    <p>The site uses a certificate whose signature uses the SHA-1 hash algorithm.</p>

    <p>SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the <a href="https://developer.mozilla.org/en-US/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> article for more details.</p>

    <p>Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.</p>
   </td>
  </tr>
 </tbody>
</table>

<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Le Bug 863874</a> est le méta-bug pour l'affichage des messages d'erreurs de sécurité dans la console web. Si vous avez d'autres idées pour des fonctionnalités utiles comme celles décrites ici, ou si vous êtes intéressé pour contribuer, jetez un coup d'œil au méta-bug et à ses dépendances.</p>

<h3 id="Message_console_API">Message console API</h3>

<p><br>
 <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>Cette section décrit les messages web console des appels API qui affichent véritablement quelque chose. Pour des informations plus génériques sur la console API il est possible de se référer à sa <a href="/fr/docs/Web/API/console">page de documentation</a>.</p>

<h4 id="Messages_derreurs">Messages d'erreurs</h4>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">API</th>
   <th scope="col">Contenu du message</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.error"><code>error()</code></a></td>
   <td>
    <p>L'argument à  <code>error()</code>.</p>

    <pre class="brush: js  language-js notranslate">
<code class="language-js">console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"an error"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7143/api-error.png" style="display: block; margin-left: auto; margin-right: auto;">
    <p>A partir de Firefox 31, la console affiche la pile complète des erreurs :</p>

    <pre class="brush: js  language-js notranslate">
<code class="language-js"><span class="keyword token">function</span> <span class="function token">error<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"an error"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="keyword token">function</span> <span class="function token">call_error<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="function token">error<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="function token">call_error<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/7745/console-error-stack.png" style="display: block; height: 109px; margin-left: auto; margin-right: auto; width: 497px;"></p>
   </td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.exception"><code>exception()</code></a></td>
   <td>Un alias de <code>error()</code>.</td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.assert"><code>assert()</code></a></td>
   <td>
    <p>Si l'insertion fonctionne, rien. Si l'insertion ne fonctionne pas l'argument :</p>

    <pre class="brush: js  language-js notranslate">
<code class="language-js">console<span class="punctuation token">.</span><span class="function token">assert<span class="punctuation token">(</span></span><span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"My assertion always fails"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7139/api-assert.png" style="display: block; margin-left: auto; margin-right: auto;">
    <p>A partir de Firefox 31, la console affiche la pile complète des insertions :</p>

    <pre class="brush: js  language-js notranslate">
<code class="language-js"><span class="keyword token">function</span> <span class="function token">assertion<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  console<span class="punctuation token">.</span><span class="function token">assert<span class="punctuation token">(</span></span><span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"assertion failed"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="keyword token">function</span> <span class="function token">call_assertion<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="function token">assertion<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="function token">call_assertion<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/7743/console-assert-stack.png" style="display: block; height: 111px; margin-left: auto; margin-right: auto; width: 497px;"></p>
   </td>
  </tr>
 </tbody>
</table>

<h4 id="Messages_davertissement">Messages d'avertissement</h4>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">API</th>
   <th scope="col">Contenu du message</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.warn"><code>warn()</code></a></td>
   <td>
    <p>L'argument à <code>warn()</code>.</p>

    <pre class="brush: js  language-js notranslate">
<code class="language-js">console<span class="punctuation token">.</span><span class="function token">warn<span class="punctuation token">(</span></span><span class="string token">"a warning"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7155/api-warn.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
 </tbody>
</table>

<h4 id="Messages_dinformation">Messages d'information</h4>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">API</th>
   <th scope="col">Contenu du message</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.info"><code>info()</code></a></td>
   <td>
    <p>L'argument à <code>info()</code>.</p>

    <pre class="brush: js  language-js notranslate">
<code class="language-js">console<span class="punctuation token">.</span><span class="function token">info<span class="punctuation token">(</span></span><span class="string token">"some info"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7145/api-info.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
 </tbody>
</table>

<h4 id="Message_de_log">Message de log</h4>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">API</th>
   <th scope="col">Contenu du message</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.count"><code>count()</code></a></td>
   <td>
    <p>Le label fourni, si présent, et le nombre d'occurrences que <code>count()</code> a appelé avec le label donné.</p>

    <pre class="brush: js  language-js notranslate">
<code class="language-js">console<span class="punctuation token">.</span><span class="function token">count<span class="punctuation token">(</span></span>user<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/7359/api-count.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
   </td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.log"><code>log()</code></a></td>
   <td>
    <p><code>L'argument à log()</code>.</p>

    <pre class="brush: js  language-js notranslate">
<code class="language-js">console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"logged"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7147/api-log.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.trace"><code>trace()</code></a></td>
   <td>Trace de la pile.
    <pre class="brush: js  language-js notranslate">
<code class="language-js">console<span class="punctuation token">.</span><span class="function token">trace<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7159/api-trace.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.dir"><code>dir()</code></a></td>
   <td>
    <p>Liste les propriétés d'un objet.</p>

    <pre class="brush: js  language-js notranslate">
<code class="language-js"><span class="keyword token">var</span> user <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById<span class="punctuation token">(</span></span><span class="string token">'user'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
console<span class="punctuation token">.</span><span class="function token">dir<span class="punctuation token">(</span></span>user<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7157/api-dir.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.time"><code>time()</code></a></td>
   <td>
    <p>Notifie que le timer a démarré.</p>

    <pre class="brush: js  language-js notranslate">
<code class="language-js">console<span class="punctuation token">.</span><span class="function token">time<span class="punctuation token">(</span></span><span class="string token">"t"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7149/api-time.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></td>
   <td>
    <p>Durée du timer.</p>

    <pre class="brush: js  language-js notranslate">
<code class="language-js">console<span class="punctuation token">.</span><span class="function token">timeEnd<span class="punctuation token">(</span></span><span class="string token">"t"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7151/api-timeEnd.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.table"><code>table()</code></a></td>
   <td>
    <div class="geckoVersionNote">
    <p>Ce message est une des nouveautés de Firefox 34.</p>
    </div>

    <p>Affiche des données de tableau comme un tableau.</p>
   </td>
  </tr>
 </tbody>
</table>

<h4 id="Messages_groupés">Messages groupés</h4>

<p>il est possible d'utiliser<code> console.group()</code> pour créer des groupes indentés dans la console. Voir <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> pour plus d'informations.</p>

<h4 id="Personnalisation_des_messages">Personnalisation des messages</h4>

<p>Depuis Firefox 31, il est possible d'utiliser le spécificateur de format <code>"%c"</code> pour personnaliser les messages console :</p>

<pre class="brush: js  language-js notranslate"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"%cMy stylish message"</span><span class="punctuation token">,</span> <span class="string token">"color: red; font-style: italic"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<div><img alt="" src="https://mdn.mozillademos.org/files/7739/console-style.png" style="display: block; height: 52px; margin-left: auto; margin-right: auto; width: 293px;"></div>

<h3 id="Messages_dentréesortie">Messages d'entrée/sortie</h3>

<p>Les commandes envoyées au navigateur en utilisant <a href="#command-line" title="#command-line">la ligne de commande de la Console Web</a>, et les réponses correspondantes, sont affichés de cette façon :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">La barre gris foncé indique qu'il s'agit de messages d'entrée/sortie, tandis que la direction de la flèche indique si il s’agit d'une entrée ou d'une sortie.</p>

<h3 id="Filtrer_et_rechercher"><a name="filtering-and-searching">Filtrer et rechercher</a></h3>

<p>Vous pouvez utiliser la barre d'outils en haut pour filtrer l'affichage :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5601/web-console-toolbar-highlighted.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 924px;">To see only messages of particular types, click the button labeled with that type ("Net", "CSS", and so on). Clicking the main part of the button toggles that type on or off, while clicking the arrow on the right gives you more fine-grained filter options within that type (for example, whether to display errors and warnings).</p>

<p>To see only messages that contain a specific string, type in the text box labeled "Filter output".</p>

<p>Enfin, vous pouvez aussi vider la Console Web de tous ses messages.</p>