diff options
Diffstat (limited to 'files/fr/web/api/console')
23 files changed, 2051 insertions, 0 deletions
diff --git a/files/fr/web/api/console/assert/index.html b/files/fr/web/api/console/assert/index.html new file mode 100644 index 0000000000..37fc75d36c --- /dev/null +++ b/files/fr/web/api/console/assert/index.html @@ -0,0 +1,76 @@ +--- +title: Console.assert() +slug: Web/API/Console/assert +tags: + - API + - DOM + - Méthodes + - débogage +translation_of: Web/API/console/assert +--- +<p>{{APIRef("Console API")}}</p> + +<p>Affiche un message d'erreur dans la console si l'assertion est fausse. Si l'assertion est vraie, rien ne se produit.</p> + +<p>{{AvailableInWorkers}}</p> + +<div class="note"> +<p><strong>Note:</strong> <em>La méthode <code>console.assert()</code> est implémentée différement dans les vieilles version de Node.js que dans celle disponible dans les navigateurs.</em></p> + +<p>Plus précisément, dans les navigateurs, appeler <code>console.assert()</code> avec une condition fausse affichera le <code>message</code> dans la console sans interrompre l'éxecution du code suivant. Dans les versions inférieure à la v10 de Node.js, cependant, une assertion fausse lèvera une exception <code>AssertionError</code>. Cette différence de comportement a été corrigée par la v10 de Node et <code>console.assert()</code> se comporte maintenant de la même façon dans Node et dans les navigateurs.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">console.assert(<em>assertion</em>, <em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<h3 id="Parameters" name="Parameters">Paramètres</h3> + +<dl> + <dt><code>assertion</code></dt> + <dd>N'importe quelle expression booléenne. Si l'assertion est fausse, le message s'affichera dans la console.</dd> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée.</dd> + <dt><code>msg</code></dt> + <dd>Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution.</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>L'objet javascript avec lequel remplacer les chaînes de substitution dans <code>msg</code>. Ceci vous offre plus de contrôle sur ce qui est affiché.</dd> +</dl> + +<p>Allez voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#assert", "console.assert()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité entre les navigateurs</h2> + +<p>{{Compat("api.Console.assert")}}</p> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li><a href="https://console.spec.whatwg.org/#assert-condition-data">WHATWG Console Standard: console.assert</a></li> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> + <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li> +</ul> diff --git a/files/fr/web/api/console/clear/index.html b/files/fr/web/api/console/clear/index.html new file mode 100644 index 0000000000..1cd6244997 --- /dev/null +++ b/files/fr/web/api/console/clear/index.html @@ -0,0 +1,116 @@ +--- +title: clear() +slug: Web/API/Console/clear +translation_of: Web/API/Console/clear +--- +<div>{{APIRef("Console API")}}</div> + +<p>Vide la console.</p> + +<p>Tous les messages de la console seront supprimés et remplacés par un message de confirmation ("Console was cleared").</p> + +<p>À noter: sur Google Chrome, <code>console.clear()</code> n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les <a href="https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation">paramètres de l'inspecteur</a>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">console.clear(); +</pre> + +<h2 id="Paramètres">Paramètres</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Paramètres</th> + <th scope="col">Status</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#clear", "console.clear()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition Initial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("48.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("48.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> + <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li> +</ul> diff --git a/files/fr/web/api/console/count/index.html b/files/fr/web/api/console/count/index.html new file mode 100644 index 0000000000..8364fc83f4 --- /dev/null +++ b/files/fr/web/api/console/count/index.html @@ -0,0 +1,110 @@ +--- +title: Console.count() +slug: Web/API/Console/count +tags: + - API + - DOM + - Développement + - Méthodes + - Web + - console + - débogage +translation_of: Web/API/Console/count +--- +<div>{{APIRef("Console API")}}</div> + +<p>Affiche dans la console le nombre de fois où la fonction <code>count()</code> a été appelée. Cette fonction accepte l'argument optionnel <code>label</code>.</p> + +<p>{{AvailableInWorkers}}</p> + +<p>Si un <code>label</code> est passé en paramètre, la fonction affiche le nombre de fois où la fonction <code>count()</code> a été appelée pour ce <code>label</code> spécifiquempent.</p> + +<p>Si aucun <code>label</code> est passé en paramètre, la fonction affiche le nombre de fois où la fonction <code>count()</code> a été appelée jusqu'à présent.</p> + +<p>Ci-dessous, un exemple d'utilisation :</p> + +<pre class="brush: js">function greet() { + console.count(); + return "hi " + user; +} + +var user = "bob"; +greet(); +user = "alice"; +greet(); +greet(); +console.count();</pre> + +<p>La console affichera les lignes suivantes :</p> + +<pre class="eval">"<no label>: 1" +"<no label>: 2" +"<no label>: 3" +"<no label>: 1" +</pre> + +<p>A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction <code>count()</code> de la ligne 11 qui est traité comme un événement indépendant.</p> + +<p>Si la variable <code>user</code> est passée à la fonction comme paramètre <code>label</code>, le code ci-dessous génèrera un nouveau compteur lorsque la variable <code>user</code> sera modifiée :</p> + +<pre class="brush: js">function greet() { + console.count(user); + return "hi " + user; +} + +var user = "bob"; +greet(); +user = "alice"; +greet(); +greet(); +console.count("alice");</pre> + +<p>La console affichera les lignes suivantes :</p> + +<pre class="eval">"bob: 1" +"alice: 1" +"alice: 2" +"alice: 3"</pre> + +<p>Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction <code>count()</code> avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">console.count([label]); +</pre> + +<h2 id="Paramètres">Paramètres</h2> + +<dl> + <dt><code>label</code></dt> + <dd>Une chaîne de caractères.</dd> + <dd>Si ce paramètre est renseigné, <code>count()</code> affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé.</dd> + <dd>S'il est omis, <code>count()</code> affiche le nombre de fois que la fonction a été appelée sur cette ligne.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Status</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#count", "console.count()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Console.count")}}</p> + +<div id="compat-desktop"> </div> + +<div id="compat-mobile"> </div> diff --git a/files/fr/web/api/console/countreset/index.html b/files/fr/web/api/console/countreset/index.html new file mode 100644 index 0000000000..2a5106ebfd --- /dev/null +++ b/files/fr/web/api/console/countreset/index.html @@ -0,0 +1,124 @@ +--- +title: Console.countReset() +slug: Web/API/Console/countReset +translation_of: Web/API/Console/countReset +--- +<div>{{APIRef("Console API")}}</div> + +<p>Remet le compteur à zero. Cette fonction prend un argument optionnel <code>label</code></p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">console.countReset(<var>[label]</var>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>label</code></dt> + <dd>Si specifié, <code>countReset()</code> remet à zero le compteur associé à ce label. S'il n'est pas specifié, <code>countReset()</code> remet à zéro le compteur par defaut.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Si le paramètre label à été spécifié :</p> + +<pre> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">counter-name: 0</span></span></span></pre> + +<p>Si aucun label n'as été specifié</p> + +<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">default: 0</span></span></span></pre> + +<h3 id="Warnings">Warnings</h3> + +<p>Si <code>label</code> est specifié mais n'existe pas <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>countReset()</code> renvoie cet avertissement :</span></span></span></p> + +<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "counter-name" doesn’t exist.</code></span></span></span></pre> + +<p>Si <code>label</code> n'est pas specifé et que <code>count()</code> n'as pas encore été appellé <code>countReset()</code> renvoie cette avertissement :</p> + +<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "default" doesn’t exist.</code></span></span></span></pre> + +<h2 id="Examples">Examples</h2> + +<p>Par exemple avec un code comme celui ci :</p> + +<pre class="brush: js">var user = ""; + +function greet() { + console.count(); + return "hi " + user; +} + +user = "bob"; +greet(); +user = "alice"; +greet(); +greet(); +console.count(); +console.countReset();</pre> + +<p>Le retour de la console ressemblera à ceci :</p> + +<pre class="eval">"default: 1" +"default: 2" +"default: 3" +"default: 1" +"default: 0" +</pre> + +<p>Pour information l'appel à <code>console.counterReset()</code> remet à zero la valeur du compteur par défaut.</p> + +<p>S'il on passe la variable <code>user</code> comme argument pour <code>label</code> et que l'on effectue un premier appel de la fonction <code>count()</code>, avec la chaine "bob" puis un second appel avec la chaine "alice" :</p> + +<pre class="brush: js">var user = ""; + +function greet() { + console.count(user); + return "hi " + user; +} + +user = "bob"; +greet(); +user = "alice"; +greet(); +greet(); +console.countReset("bob"); +console.count("alice");</pre> + +<p>On obtiendra ce retour dans la console</p> + +<pre class="eval">"bob: 1" +"alice: 1" +"alice: 2" +"bob: 0" +"alice: 3"</pre> + +<p>Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#count", "console.countReset()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Console.countReset")}}</p> diff --git a/files/fr/web/api/console/debug/index.html b/files/fr/web/api/console/debug/index.html new file mode 100644 index 0000000000..c632444e7f --- /dev/null +++ b/files/fr/web/api/console/debug/index.html @@ -0,0 +1,72 @@ +--- +title: Console.debug() +slug: Web/API/Console/debug +tags: + - API + - Développement + - Méthodes + - Web + - console + - débogage + - outils de développement +translation_of: Web/API/Console/debug +--- +<div>{{APIRef("Console API")}}</div> + +<p><span class="seoSummary">Affiche un message dans la console web, avec le niveau de log "debug". Le message est affiché uniquement si la console est configurée pour afficher les messages de type debug.</span></p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">console.debug(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.debug(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractères, de chacun de ces objets est affichée dans l'ordre de la liste.</dd> + <dt><code>msg</code></dt> + <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie. Voir {{SectionOnPage("fr/docs/Web/API/Console", "Utiliser les caractères de substitution")}} pour une description du fonctionnement des substitutions.</dd> +</dl> + +<p>Voir <a href="/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#debug", "console.debug()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez y contribuer, veuillez faire un checkout de <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer un pull request.</div> + +<p>{{Compat("api.Console.debug")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> + <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li> +</ul> diff --git a/files/fr/web/api/console/dir/index.html b/files/fr/web/api/console/dir/index.html new file mode 100644 index 0000000000..a7582315c6 --- /dev/null +++ b/files/fr/web/api/console/dir/index.html @@ -0,0 +1,67 @@ +--- +title: Console.dir() +slug: Web/API/Console/dir +tags: + - API + - DOM + - Développement + - Méthodes + - Web + - console + - débogage +translation_of: Web/API/Console/dir +--- +<div>{{APIRef("Console API")}}</div> + +<p>Affiche une liste interactive des propriétés de l'objet Javascript spécifié. La sortie est présenté comme un listing hiérarchique avec des triangles qui permettent l'affichage du contenu des objets-enfants.</p> + +<p>En d'autres termes, console.dir est le moyen de voir toutes les propriétés de l'objet JavaScript spécifié dans la console, par lequel le développeur peut facilement obtenir les propriétés de l'objet.</p> + +<p>{{AvailableInWorkers}}</p> + +<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">console.dir(<em>object</em>); +</pre> + +<h2 id="Paramètres">Paramètres</h2> + +<dl> + <dt><code>object</code></dt> + <dd>Un objet Javascript qui contient les propriétés qui doivent être affichées.</dd> +</dl> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#dir", "console.dir()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Console.dir")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> + <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a></li> +</ul> diff --git a/files/fr/web/api/console/dirxml/index.html b/files/fr/web/api/console/dirxml/index.html new file mode 100644 index 0000000000..cad694b8a9 --- /dev/null +++ b/files/fr/web/api/console/dirxml/index.html @@ -0,0 +1,58 @@ +--- +title: Console.dirxml() +slug: Web/API/Console/dirxml +tags: + - API + - DOM + - Développement + - Méthodes + - console + - débogage +translation_of: Web/API/Console/dirxml +--- +<div>{{APIRef ("Console API")}}</div> + +<div>Affiche un arbre interactif des éléments descendants de l'élément XML / HTML spécifié. S'il n'est pas possible d'afficher en tant qu'élément, la vue Objet JavaScript est affichée à la place. La sortie est présentée sous la forme d'une liste hiérarchique des noeuds extensibles qui vous permettent de voir le contenu des nœuds enfants.</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">console.dirxml(<em>object</em>); +</pre> + +<h2 id="Paramètres">Paramètres</h2> + +<dl> + <dt><code>object</code></dt> + <dd>Un objet JavaScript dont les propriétés doivent être sorties.</dd> +</dl> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#dirxml", "console.dirxml()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Console.dirxml")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> diff --git a/files/fr/web/api/console/error/index.html b/files/fr/web/api/console/error/index.html new file mode 100644 index 0000000000..46eef2ccd3 --- /dev/null +++ b/files/fr/web/api/console/error/index.html @@ -0,0 +1,74 @@ +--- +title: console.error() +slug: Web/API/Console/error +tags: + - API + - DOM + - Développement + - Méthodes + - Web + - console + - débogage +translation_of: Web/API/Console/error +--- +<div>{{APIRef("Console API")}}</div> + +<p>Affiche un message d'erreur dans la console du navigateur.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">console.error(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.error(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +console.exception(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<div class="note"> +<p><strong>Note:</strong> <code>console.exception()</code> est un alias de <code>console.error()</code>; ils sont fonctionnellement identiques.</p> +</div> + +<h3 id="Parameters" name="Parameters">Paramètres</h3> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd> + <dt><code>msg</code></dt> + <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd> +</dl> + +<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#error", "console.error()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> + +<div>{{Compat("api.Console.error")}}</div> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> + <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li> +</ul> diff --git a/files/fr/web/api/console/group/index.html b/files/fr/web/api/console/group/index.html new file mode 100644 index 0000000000..5b4a81302d --- /dev/null +++ b/files/fr/web/api/console/group/index.html @@ -0,0 +1,86 @@ +--- +title: Console.group() +slug: Web/API/Console/group +tags: + - API + - DOM + - Développement + - Méthodes + - Web + - console + - débogage +translation_of: Web/API/Console/group +--- +<div>{{APIRef("Console API")}}</div> + +<p>Création d'un nouveau groupe en ligne dans la <a href="/en-US/docs/Tools/Web_Console">console Web</a>. Cela indente les messages de console suivants par un niveau supplémentaire, jusqu'à ce que {{domxref("console.groupEnd()")}} soit appelé.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">console.group(); +</pre> + +<h2 id="Paramètres">Paramètres</h2> + +<dl> + <dt><code>label</code></dt> + <dd>donne une étiquette au groupe. Facultatif. (Chrome 59 testé). Ne fonctionne pas avec<code> </code> <code>console.groupEnd()</code>.</dd> +</dl> + +<p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p> + +<p><span id="result_box" lang="fr"><span>Vous pouvez utiliser des groupes imbriqués pour organiser votre sortie en associant visuellement les messages correspondants.</span> <span>Pour créer un nouveau bloc imbriqué, appelez <code>console.group ()</code>.</span> <span>La méthode <code>console.groupCollapsed ()</code> est similaire, mais le nouveau bloc est réduit et nécessite de cliquer sur un bouton de divulgation pour le lire.</span></span></p> + +<div class="note"> +<p><strong>Note :</strong> De Gecko 9 jusqu'à Gecko 51, la méthode <code>groupCollapsed()</code> n'était pas identique à <code>group()</code>. Les groupes réduits sont entièrement pris en charge depuis Gecko 52. Voir {{bug("1088360")}}.</p> +</div> + +<p>Pour sortir du groupe courant, appeler <code>console.groupEnd()</code>. Par exemple, étant donné ce code :</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"This is the outer level"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Level 2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Level 3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">warn</span><span class="punctuation token">(</span><span class="string token">"More of level 3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">groupEnd</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Back to level 2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">groupEnd</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Back to the outer level"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p><span class="short_text" id="result_box" lang="fr"><span>La sortie ressemble à ceci :</span></span></p> + +<p><img alt="A screenshot of messages nested in the console output." src="https://developer.mozilla.org/@api/deki/files/6082/=nesting.png"></p> + +<p>Pour plus de détail, se reporter à l'article <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> dans la documentation sur la {{domxref("console")}}.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#consolegroupobject-object-", "console.group()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Console.group")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> diff --git a/files/fr/web/api/console/groupcollapsed/index.html b/files/fr/web/api/console/groupcollapsed/index.html new file mode 100644 index 0000000000..11679a50e2 --- /dev/null +++ b/files/fr/web/api/console/groupcollapsed/index.html @@ -0,0 +1,64 @@ +--- +title: Console.groupCollapsed() +slug: Web/API/Console/groupCollapsed +tags: + - API + - DOM + - Développement + - Méthode + - Reference + - Web + - console + - débogage +translation_of: Web/API/Console/groupCollapsed +--- +<div>{{APIRef("Console API")}}</div> + +<p><span id="result_box" lang="fr"><span>Crée un nouveau groupe intégré dans la</span></span> console Web. <span id="result_box" lang="fr"><span>Contrairement à {{domxref ("console.group ()")}}, le nouveau groupe est créé réduit.</span> <span>L'utilisateur devra utiliser le bouton de divulgation à côté pour le développer, en révélant les entrées créées dans le groupe.</span></span></p> + +<p><span lang="fr"><span>Appellez </span></span> {{domxref("console.groupEnd()")}} pour revenir au groupe parent.</p> + +<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> dans la documentation de {{domxref("console")}} pour plus de détails et des exemples.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">console.groupCollapsed([label]); +</pre> + +<h2 id="Paramètres">Paramètres</h2> + +<dl> + <dt><code>label</code></dt> + <dd>Étiquette pour le groupe. Facultatif.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#groupcollapsed", "console.groupCollapsed()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Console.groupCollapsed")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> diff --git a/files/fr/web/api/console/groupend/index.html b/files/fr/web/api/console/groupend/index.html new file mode 100644 index 0000000000..5bd3f19cb9 --- /dev/null +++ b/files/fr/web/api/console/groupend/index.html @@ -0,0 +1,55 @@ +--- +title: Console.groupEnd() +slug: Web/API/Console/groupEnd +tags: + - API + - DOM + - Développement + - Méthode + - console + - débogage +translation_of: Web/API/Console/groupEnd +--- +<p>{{APIRef("Console API")}}</p> + +<p>Quitte le groupe en ligne actuel dans la <a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web">console Web</a>. Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">console.groupEnd(); +</pre> + +<h2 id="Paramètres">Paramètres</h2> + +<p>Aucun.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#groupend", "console.groupEnd()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Console.groupEnd")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> diff --git a/files/fr/web/api/console/index.html b/files/fr/web/api/console/index.html new file mode 100644 index 0000000000..822d90a5da --- /dev/null +++ b/files/fr/web/api/console/index.html @@ -0,0 +1,275 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - Interface + - Reference + - console + - débogage +translation_of: Web/API/Console +--- +<div>{{APIRef("Console API")}}</div> + +<p>L'objet <strong><code>console</code></strong> donne accès à la console de débogage du navigateur (par exemple., la<a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web"> Console Web</a> dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.</p> + +<p>La <code>console</code> est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. <span id="result_box" lang="fr"><span>Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console.</span> <span>Par exemple :</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Failed to open the specified link"</span><span class="punctuation token">)</span></code></pre> + +<p>Cette page documente les {{anch("Methods", "méthodes")}} disponibles pour l'objet <code>console</code> et donne quelques {{anch("Usage", "exemples d'utilisation")}}.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{domxref("Console.assert()")}}</dt> + <dd>Affiche un message et une trace d'appels dans la console si l'assertion en argument est à <code>false</code>.</dd> + <dt>{{domxref("Console.clear()")}}</dt> + <dd>Vide la console.</dd> + <dt>{{domxref("Console.count()")}}</dt> + <dd>Affiche le nombre de fois que la ligne a été appelée avec un label donné.</dd> + <dt>{{domxref("Console.debug()")}}</dt> + <dd>Un alias de <code>log().</code></dd> +</dl> + +<div class="note"> +<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>À partir de Chromium 58, cette méthode n'apparaît que dans les consoles de navigateur Chromium lorsque le niveau "Verbose" est sélectionné.</span></span></p> +</div> + +<dl> + <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt> + <dd>Affiche une liste interactive des propriétés d'un objet JavaScript donné. Cette liste vous permet d'examiner le contenu des enfants de l'objet en ouvrant les détails (petits triangles).</dd> + <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt> + <dd> + <p>Affiche si possible une représentation d'éléments XML/HTML d'un objet spécifié. Sinon, c'est une vue de l'objet JavaScript.</p> + </dd> + <dt>{{domxref("Console.error()")}}</dt> + <dd>Affiche un message d'erreur. Vous pouvez utiliser les <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd> + <dt>{{domxref("Console._exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Un alias d'<code>error();</code></dd> + <dt>{{domxref("Console.group()")}}</dt> + <dd>Crée un nouveau <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à <code>group()</code>. Pour revenir au niveau précédent, appeler <code>groupEnd()</code>.</dd> + <dt>{{domxref("Console.groupCollapsed()")}}</dt> + <dd>Crée un nouveau <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à <code>group()</code> , <span id="result_box" lang="fr"><span>cela commence avec le groupe en ligne effondré, nécessitant l'utilisation d'un bouton de divulgation pour l'agrandir</span></span>. Pour revenir au niveau précédent, appeler <code>groupEnd()</code>.</dd> + <dt>{{domxref("Console.groupEnd()")}}</dt> + <dd>Quitte le <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> d'indentation courant.</dd> + <dt>{{domxref("Console.info()")}}</dt> + <dd>Affiche un message d'information. Vous pouvez utiliser les <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd> + <dt>{{domxref("Console.log()")}}</dt> + <dd>Permet d'afficher des messages dans la console. Vous pouvez utiliser les <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd> + <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt> + <dd>démarre le profilage du navigateur (par exemple, l'<a href="https://developer.mozilla.org/fr/docs/Outils/Performance">outil performances de Firefox</a>). Vous pouvez spécifier un nom en option pour ce profil.</dd> + <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt> + <dd>Arrête le profilage. Vous pouvez voir le résultat de ce dernier dans l'outil « performance » du navigateur (par exemple, l'<a href="https://developer.mozilla.org/fr/docs/Outils/Performance">outil performance Firefox</a>).</dd> + <dt>{{domxref("Console.table()")}}</dt> + <dd>Affiche des données tabulaires comme un tableau.</dd> + <dt>{{domxref("Console.time()")}}</dt> + <dd>Démarre un <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers">chronomètre</a> que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page.</dd> + <dt>{{domxref("Console.timeEnd()")}}</dt> + <dd>Arrête le <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers">chronomètre</a> spécifié et affiche le temps écoulé en millisecondes depuis son démarrage.</dd> + <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt> + <dd>Ajoute un marqueur dans la <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> du navigateur ou l'outil <a href="https://developer.mozilla.org/fr/docs/Outils/Performance/Waterfall">Waterfall</a>.</dd> + <dt>{{domxref("Console.trace()")}}</dt> + <dd>Affiche une <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Traces_d%27appel">trace d'appels</a>.</dd> + <dt>{{domxref("Console.warn()")}}</dt> + <dd>Affiche un message d'avertissement. Vous pouvez utiliser les <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd> +</dl> + + +<h2 id="Usage" name="Usage">Exemples d'utilisation</h2> + +<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Afficher du texte dans la console</h3> + +<p>La fonction la plus utilisée de la console est d'afficher du texte ou autres données. Il y a quatre sortes d'affichages que vous pouvez générer, en utilisant les méthodes {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, et {{domxref("console.error()")}}. Chacune de ces méthodes génére un affichage différent dans la console, et vous pouvez utiliser les fonctions de filtrage du navigateur pour voir uniquement les types de sortie qui vous intéressent.</p> + +<p>Il y a deux manières d'utiliser chacune de ces méthodes de sortie ; Vous pouvez passer une liste d'objets dont leur représentation sera concaténée dans une seule chaine et s'affichera dans la console, ou vous pouvez passer une chaîne de caractères contenant zéro et plus de caractères de substitution suivis d'une liste d'objets avec lesquels les remplacer.</p> + +<h4 id="Afficher_un_seul_objet">Afficher un seul objet</h4> + +<p>La manière la plus simple d'utiliser les méthodes de « log » est d'afficher un seul objet :</p> + +<pre class="brush: js">var someObject = { str: "Some text", id: 5 }; +console.log(someObject); +</pre> + +<p>L'affichage ressemblera à ceci :</p> + +<pre>[09:27:13.475] ({str:"Some text", id:5})</pre> + +<h4 id="Afficher_plusieurs_objets">Afficher plusieurs objets</h4> + +<p>Vous pouvez aussi afficher plusieurs objets, en les séparant par une virgule, comme ceci :</p> + +<pre class="brush: js">var car = "Dodge Charger"; +var someObject = {str:"Some text", id:5}; +console.info("My first car was a", car, ". The object is: ", someObject);</pre> + +<p>L'affichage ressemblera à ceci :</p> + +<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) +</pre> + +<h4 id="Utiliser_les_caractères_de_substitution">Utiliser les caractères de substitution</h4> + +<p>Gecko 9.0 {{geckoRelease("9.0")}} a amené le support des caractères de substitution. Lorsque l'on passe en argument une chaîne à l'une des méthodes qui acceptent des chaînes de caractère, on peut utiliser ces caractères de substitution :</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">caractère de substitution</td> + <td class="header">description</td> + </tr> + <tr> + <td>%o or %O</td> + <td>Affiche un lien hypertexte sur un objet JavaScript. Cliquer le lien ouvre l'inspecteur.</td> + </tr> + <tr> + <td>%d or %i</td> + <td>Affiche un entier. <span id="result_box" lang="fr"><span>Le formatage des nombres est supporté, par exemple console.log ("Foo% .2d", 1.1) affichera le nombre sous forme de deux chiffres significatifs avec un 0 : Foo 01</span></span></td> + </tr> + <tr> + <td>%s</td> + <td>Affiche une chaîne de caractères.</td> + </tr> + <tr> + <td>%f</td> + <td>Affiche un nombre réél. Le formatage est supporté, par exemple, <code>console.log("Foo %.2f", 1.1)</code> affichera un nombre avec 2 décimales : <code>Foo 1.10</code> .</td> + </tr> + </tbody> +</table> + +<p>Chacun de ceux-ci ira chercher l'argument qui suit la chaîne à formater. Par exemple :</p> + +<pre>for (var i=0; i<5; i++) { + console.log("Hello, %s. You've called me %d times.", "Bob", i+1); +} +</pre> + +<p>L'affichage ressemblera à ceci :</p> + +<pre>[13:14:13.481] Hello, Bob. You've called me 1 times. +[13:14:13.483] Hello, Bob. You've called me 2 times. +[13:14:13.485] Hello, Bob. You've called me 3 times. +[13:14:13.487] Hello, Bob. You've called me 4 times. +[13:14:13.488] Hello, Bob. You've called me 5 times. +</pre> + +<h4 id="Donner_un_style_à_l'affichage_de_la_console">Donner un style à l'affichage de la console</h4> + +<p>Vous pouvez utiliser l'instruction <code>"%c"</code> pour appliquer du style CSS à l'affichage de la console :</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"This is %cMy stylish message"</span><span class="punctuation token">,</span> <span class="string token">"color: yellow; font-style: italic; background-color: blue;padding: 2px"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div> + +<div> </div> + +<div class="note"> +<p> <strong>Note :</strong> <span id="result_box" lang="fr"><span>Un certain nombre de propriétés CSS sont supportées par ce style;</span> <span>vous devriez expérimenter et voir lesquels s'avèrent utiles.</span></span></p> +</div> + +<p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p> + +<p>Vous pouvez utiliser des groupes imbriqués pour vous aider à vous repérer dans l'affichage. Pour créer un nouveau bloc, appelez <code>console.group()</code>. La méthode <code>console.groupCollapsed()</code> est similaire, mais elle crée un bloc qui sera réduit.</p> + +<div class="note"><strong>Note :</strong> "Collapsed groups" ne sont pas supportés pour l'instant dans Gecko; La méthode <code>groupCollapsed()</code> est la même que <code>group()</code> en ce moment.</div> + +<p class="note">Pour quitter le groupe dans lequel on est, appeler <code>console.groupEnd()</code>. Par exemple, examinez ce code :</p> + +<pre class="brush: js">console.log("This is the outer level"); +console.group(); +console.log("Level 2"); +console.group(); +console.log("Level 3"); +console.warn("More of level 3"); +console.groupEnd(); +console.log("Back to level 2"); +console.groupEnd(); +console.debug("Back to the outer level"); +</pre> + +<p>L'affichage ressemblera à ceci :</p> + +<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p> + +<div>{{h3_gecko_minversion("Timers", "10.0")}}</div> + +<p>Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet <code>console</code>. pour démarrer un chronomètre, appelez la méthode <code>console.time</code><code>()</code> en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode <code>console.timeEnd()</code>, en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres.</p> + +<p>Par exemple, voici ce code :</p> + +<pre class="brush: js">console.time("answer time"); +alert("Click to continue"); +console.timeEnd("answer time"); +</pre> + +<p>affichera le temps pour l'utilisateur dont il a eu besoin pour faire disparaitre la fenêtre d'alerte :</p> + +<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p> + +<p>Notez que le nom du chronomètre est affiché deux fois, à son départ et quand il se termine.</p> + +<div class="note"><strong>Note:</strong> Il est important de noter que si vous vous servez de ceci pour enregistrer les durées du traffic réseau, le chronomètre renverra le temps total d'échanges, alors que les durées affichées dans l'onglet network représente seulement la durée à la réception du header. Si vous avez activer l'enregistrement de réponse du body, le temps listé pour la réponse du header et du body devrait correspondre à ce qu'affiche la sortie de la console.</div> + +<h3 id="Traces_d'appel">Traces d'appel</h3> + +<p>L'objet console supporte aussi l'affichage d'une trace d'appels ; cela montre le chemin pris pour atteindre l'endroit auquel vous avez fait appel à la fonction {{domxref("console.trace()")}}. Ce qui donne avec ce code :</p> + +<pre>foo(); + +function foo() { + function bar() { + console.trace(); + } + bar(); +} +</pre> + +<p>L'affichage dans la console ressemblera à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Console API')}}</td> + <td>{{Spec2('Console API')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Notes">Notes</h2> + +<ul> + <li><span id="result_box" lang="fr"><span>Au moins dans Firefox, si une page définit un objet console, cet objet remplace celui créé dans Firefox.</span></span></li> + <li><span id="result_box" lang="fr"><span>Antérieur à {{Gecko ("12.0")}}, les méthodes de l'objet console ne fonctionnent que lorsque la console Web est ouverte.</span> <span>À partir de {{Gecko ("12.0")}}, la sortie est mise en cache jusqu'à ce que la console Web soit ouverte, puis affichée à ce moment-là.</span></span></li> + <li><span id="result_box" lang="fr"><span>Il est à noter que l'objet de console intégré de Firefox est compatible avec celui fourni par</span></span> <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Outils" title="Tools">Outils de développement</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web" title="Web Console">Console web</a> - <span id="result_box" lang="fr"><span>comment la console Web de Firefox gère les appels d'API de console</span></span></li> + <li><a href="https://developer.mozilla.org/fr/docs/Outils/D%C3%A9bogage_distant">Débogage distant</a> - <span id="result_box" lang="fr"><span>comment afficher la sortie de la console lorsque la cible de débogage est un périphérique mobile</span></span></li> + <li><a href="https://developer.mozilla.org/fr/docs/Archive/B2G_OS/Debugging/Journalisation_console" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">Journalisation console sur l'appareil</a> - <span class="short_text" id="result_box" lang="fr"><span>comment se connecter sur les appareils Firefox OS</span></span></li> +</ul> + +<h3 id="Autres_implémentations">Autres implémentations</h3> + +<ul> + <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li> + <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li> + <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li> +</ul> diff --git a/files/fr/web/api/console/info/index.html b/files/fr/web/api/console/info/index.html new file mode 100644 index 0000000000..b66d16dddb --- /dev/null +++ b/files/fr/web/api/console/info/index.html @@ -0,0 +1,138 @@ +--- +title: Console.info() +slug: Web/API/Console/info +tags: + - API + - Debugging + - Method + - NeedsBrowserCompatibility + - web console +translation_of: Web/API/Console/info +--- +<p>{{ APIRef("Console API") }}{{Non-standard_header}}</p> + +<h2 id="Summary" name="Summary">Résumé</h2> + +<p>Affiche un message informatif dans la console du navigateur. Dans Firefox et Chrome, une petit icône de <em>i </em>s'affiche devant le message.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox notranslate">console.info(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.info(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd> + <dt><code>msg</code></dt> + <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd> +</dl> + +<p>Voir <a href="/fr/docs/Web/API/Console#Outputting_text_to_the_console" title="DOM/console#Outputting_text_to_the_console">Afficher du texte sur la console</a> dans la documentation de {{ domxref("console") }} pour plus de détails.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<p><a href="https://github.com/DeveloperToolsWG/console-object/blob/master/api.md#consoleinfoobject--object-">Console Object API</a></p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>8</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Substitution strings</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("9.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Information icon</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td><span style="font-size: 12px; line-height: 18px;">{{ CompatVersionUnknown() }}</span></td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("38.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Substitution strings</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("9.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("38.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> +</ul> diff --git a/files/fr/web/api/console/log/index.html b/files/fr/web/api/console/log/index.html new file mode 100644 index 0000000000..e7fb49d849 --- /dev/null +++ b/files/fr/web/api/console/log/index.html @@ -0,0 +1,97 @@ +--- +title: console.log() +slug: Web/API/Console/log +tags: + - API + - DOM + - Développement + - Method + - Méthode + - Refernece + - Web + - console + - console.dir() + - console.log() +translation_of: Web/API/Console/log +--- +<div>{{APIRef("Console API")}}</div> + +<p>La méthode <strong><code>log()</code></strong> de l'objet {{domxref("Console")}} affiche un message dans la console Web. Le message peut être une simple chaine (avec des valeurs optionnelles de substitution), ou peut être un ou plusieurs objets JavaScript.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox notranslate">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>une liste d'objets Javascript à afficher. Les représentations textuelles de chacun de ces objets seront affichées à la sortie dans l'ordre indiqué. Notez que si vous consignez des objets dans les dernières versions de Chrome et Firefox, ce que vous avez enregistré sur la console est une référence à l'objet, qui n'est pas nécessairement la «valeur» de l'objet au moment où vous appelez la console.log (), mais est la valeur de l'objet au moment où vous cliquez dessus.</dd> + <dt><code>msg</code></dt> + <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs chaînes de substitution.</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>Objets Javascript qui remplaceront les chaînes de subsitution éventuellement contenues dans <code>msg</code>. Cela offre plus de contrôle sur le format d'affichage.</dd> +</dl> + +<p>Voir <a href="/fr/docs/Web/API/Console#Outputting_text_to_the_console" title="DOM/console#Outputting_text_to_the_console">Afficher du texte sur la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p> + +<h2 id="Différence_avec_console.dir">Différence avec console.dir()</h2> + +<p><span id="result_box" lang="fr"><span>Vous pourriez vous demander quelle est la différence entre {{domxref("</span></span>console.dir()")}} et <code>console.log()</code>.</p> + +<p>Une autre différence utile dans Chrome existe lors de l'envoi d'éléments DOM vers la console.</p> + +<p><img alt="" src="https://i.imgur.com/DozDcYR.png"></p> + +<p>À noter :</p> + +<ul> + <li><code>console.log</code> affiche les éléments dans un arbre de type HTML,</li> + <li><code>console.dir</code> affiche les éléments dans un arbre de type JSON.</li> +</ul> + +<p><span class="short_text" id="result_box" lang="fr"><span>Plus précisément</span></span>, <code>console.log</code> fait un traitement spécial aux éléments DOM, alors que <code>console.dir</code> n'en fait pas. C'est souvent utile pour voir la représentation complète de l'objet JS DOM.</p> + +<p>Il y a plus d'informations dans <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a> sur ceci et d'autres fonctions.</p> + +<h2 id="Affichage_dobjets">Affichage d'objets</h2> + +<p>Évitez d'utiliser <code>console.log(obj)</code> mais préférez <code>console.log(JSON.parse(JSON.stringify(obj)))</code> afin d'être sûr de voir la valeur de l'objet au moment de l'affichage en console. Autrement, de nombreux navigateurs produisent un affichage interactif de l'objet qui se maintient à jour quand les propriétés de l'objet changent. Cela ne pourrait pas être ce que vous voulez et peut porter à confusion.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#log", "console.log()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Console.log")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> + <li><a href="http://getfirebug.com/wiki/index.php/Console_API" title="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug supports additional features in its console.log() implementation, such as <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/" title="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li> + <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li> +</ul> diff --git a/files/fr/web/api/console/profile/index.html b/files/fr/web/api/console/profile/index.html new file mode 100644 index 0000000000..e35031d483 --- /dev/null +++ b/files/fr/web/api/console/profile/index.html @@ -0,0 +1,42 @@ +--- +title: Console.profile() +slug: Web/API/Console/profile +tags: + - API + - DOM + - Méthodes + - Profils + - débogage +translation_of: Web/API/Console/profile +--- +<p>{{APIRef("Console API")}}{{Non-standard_header}}</p> + +<p>Commence l'enregistrement d'un profil de performance (par exemple, l'outil <a href="https://developer.mozilla.org/fr/docs/Outils/Performance">performance de Firefox</a>).</p> + +<p>Vous pouvez éventuellement fournir un argument pour nommer le profil, ce qui vous permet d'arrêter uniquement ce profil si plusieurs profils sont enregistrés. Voir {{domxref("Console.profileEnd()")}} pour voir comment cet argument est interprété.</p> + +<p>Pour arrêter l'enregistrement, appeler {{domxref("Console.profileEnd()")}}.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">console.profile(<em>profileName</em>); +</pre> + +<h2 id="Paramètres">Paramètres</h2> + +<dl> + <dt><code>profileName</code></dt> + <dd>Le nom à donner au profil. Facultatif.</dd> +</dl> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Console.profile")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Console.profileEnd()")}}</li> +</ul> diff --git a/files/fr/web/api/console/profileend/index.html b/files/fr/web/api/console/profileend/index.html new file mode 100644 index 0000000000..dc76f8eac9 --- /dev/null +++ b/files/fr/web/api/console/profileend/index.html @@ -0,0 +1,49 @@ +--- +title: Console.profileEnd() +slug: Web/API/Console/profileEnd +tags: + - API + - DOM + - Méthodes + - Profils +translation_of: Web/API/Console/profileEnd +--- +<p>{{APIRef("Console API")}}{{Non-standard_header}}</p> + +<div class="warning"> +<p>L'appel de cet API immédiatement après <code>console.profile()</code> peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un <code>setTimeout</code> avec un délai d'au-moins 5 ms. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1173588">bug #1173588</a>.</p> +</div> + +<p>La méthode <code>profileEnd</code> arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}.</p> + +<p>Vous pouvez éventuellement insérer un argument pour nommer le profil. Cela vous permet d'arrêter uniquement ce profil si vous avez enregistré plusieurs profils.</p> + +<ul> + <li>Si <code>Console.profileEnd()</code> reçoit un nom de profil qui correspond au nom d'un profil en cours d'enregistrement, ce profil est arrêté.</li> + <li>Si <code>Console.profileEnd()</code> reçoit un nom de profil qui ne correspond pas au nom d'un profil en cours d'enregistrement, aucune modification n'est apportée.</li> + <li>Si <code>Console.profileEnd()</code> ne reçoit pas un nom de profil, le dernier profil démarré est arrêté.</li> +</ul> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">console.profileEnd(<em>profileName</em>); +</pre> + +<h2 id="Paramètres">Paramètres</h2> + +<dl> + <dt><code>profileName</code></dt> + <dd>Le nom à donner au profil. Ce paramètre est facultatif.</dd> +</dl> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Console.profileEnd")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Console.profile()")}}</li> +</ul> diff --git a/files/fr/web/api/console/table/index.html b/files/fr/web/api/console/table/index.html new file mode 100644 index 0000000000..dabdd1fa6d --- /dev/null +++ b/files/fr/web/api/console/table/index.html @@ -0,0 +1,152 @@ +--- +title: Console.table +slug: Web/API/Console/table +tags: + - API + - DOM + - Développement + - Méthode + - console + - débogage +translation_of: Web/API/Console/table +--- +<div>{{APIRef("Console API")}}</div> + +<p><span class="seoSummary">Affiche des données tabulaires sous la forme d'un tableau.</span></p> + +<p>Cette fonction prend un argument obligatoire <code>data</code>, qui doit être un tableau (Array) ou un objet, et un argument facultatif <code>columns</code>.</p> + +<p>Il affiche <code>data</code> sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet)</p> + +<p>La première colonne dans le tableau sera intitulé <code>(index)</code>. Si <code>data</code> est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si <code>data</code> est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) : <code>console.table</code> est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté)</p> + +<p>{{AvailableInWorkers}}</p> + +<h3 id="Collections_de_données_primitives">Collections de données primitives</h3> + +<p><code>data</code> peut contenir un tableau ou un objet.</p> + +<pre class="brush: js">// un tableau de chaînes de caractères + +console.table(["apples", "oranges", "bananas"]);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<pre class="brush: js">// un objet dont les propriétés sont des chaînes de caractères + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var me = new Person("John", "Smith"); + +console.table(me);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Collections_de_données_composées">Collections de données composées</h3> + +<p>Si les éléments d'un tableau, ou les propriétés d'un objet, sont eux-mêmes des tableaux ou des objets, alors ces éléments ou propriétés sont énumérés dans chaque ligne, un élément par colonne :</p> + +<pre class="brush: js">// un tableau de tableaux + +var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]] +console.table(people);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<pre class="brush: js">// un tableau d'objets + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var john = new Person("John", "Smith"); +var jane = new Person("Jane", "Doe"); +var emily = new Person("Emily", "Jones"); + +console.table([john, jane, emily]);</pre> + +<p>Notez que si le tableau contient des objets, alors les colonnes seront nommées avec les noms des propriétés.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<pre class="brush: js">// un objet contenant des propriétés qui sont des objets + +var family = {}; + +family.mother = new Person("Jane", "Smith"); +family.father = new Person("John", "Smith"); +family.daughter = new Person("Emily", "Smith"); + +console.table(family);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Restreindre_les_colonnes_affichées">Restreindre les colonnes affichées</h3> + +<p>Par défaut, <code>console.table()</code> liste tous les éléments pour chaque ligne. Vous pouvez utiliser le paramètre facultatif <code>columns</code> pour sélectionner un sous-ensemble de colonnes à afficher :</p> + +<pre class="brush: js">// un tableau d'objets, affichant seulement firstName + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var john = new Person("John", "Smith"); +var jane = new Person("Jane", "Doe"); +var emily = new Person("Emily", "Jones"); + +console.table([john, jane, emily], ["firstName"]);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Ordonner_les_colonnes">Ordonner les colonnes</h3> + +<p>Vous pouvez ordonner les colonnes en cliquant sur l'intitulé de la colonne.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">console.table(data [, <em>columns]</em>); +</pre> + +<h3 id="Parameters" name="Parameters">Paramètres</h3> + +<dl> + <dt><code>data</code></dt> + <dd>La donnée à afficher. Doit être un tableau ou un objet.</dd> + <dt><code>columns</code></dt> + <dd>Un tableau contenant les noms des colonnes à inclure dans la sortie.</dd> +</dl> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#table", "console.table()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> + +<div>{{Compat("api.Console.table")}}</div> + +<div id="compat-desktop"> </div> + +<div id="compat-mobile"> +<div id="compat-desktop"> </div> +</div> diff --git a/files/fr/web/api/console/time/index.html b/files/fr/web/api/console/time/index.html new file mode 100644 index 0000000000..69c5e481d9 --- /dev/null +++ b/files/fr/web/api/console/time/index.html @@ -0,0 +1,60 @@ +--- +title: console.time +slug: Web/API/Console/time +tags: + - API + - DOM + - Développement + - Méthode + - Web + - console + - débogage +translation_of: Web/API/Console/time +--- +<p>{{APIRef("Console API")}}</p> + +<p>Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes <span style="line-height: inherit;">dans la console.</span></p> + +<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers" title="en/DOM/console#Timers">Timers</a> dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">console.time(<em>label</em>); +</pre> + +<h2 id="Paramètres">Paramètres</h2> + +<dl> + <dt><code>label</code></dt> + <dd>Nom qui identifiera le nouveau "timer". Il faut utiliser le même nom pour {{ domxref("console.timeEnd()") }} pour arrêter le "timer" et afficher le temps dans la console.</dd> +</dl> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#time", "console.time()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Console.time")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{ domxref("console.timeEnd()") }}</li> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> diff --git a/files/fr/web/api/console/timeend/index.html b/files/fr/web/api/console/timeend/index.html new file mode 100644 index 0000000000..f4a94062cf --- /dev/null +++ b/files/fr/web/api/console/timeend/index.html @@ -0,0 +1,58 @@ +--- +title: console.timeEnd +slug: Web/API/Console/timeEnd +tags: + - API + - Console Web + - DOM + - Développement Web + - Methode(2) + - Méthode +translation_of: Web/API/Console/timeEnd +--- +<div>{{APIRef("Console API")}}</div> + +<p>Arrête un chronomètre (<em>timer</em>) précédemment démarré par {{domxref("console.time()")}}.</p> + +<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers" title="DOM/console#Timers">Timers</a> dans la documentation de {{domxref("console")}} pour des détails et des exemples.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">console.timeEnd(<em>label</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>label</code></dt> + <dd>Le nom du <em>timer</em> à stopper. Une fois arrêté, le temps écoulé est automatiquement affiché dans la <a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web">Console Web</a>.</dd> +</dl> + +<h2 id="Spécification" name="Spécification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#timeend", "console.timeEnd()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{Compat("api.Console.timeEnd")}}</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a>.</li> +</ul> diff --git a/files/fr/web/api/console/timelog/index.html b/files/fr/web/api/console/timelog/index.html new file mode 100644 index 0000000000..0b06d664eb --- /dev/null +++ b/files/fr/web/api/console/timelog/index.html @@ -0,0 +1,99 @@ +--- +title: Console.timeLog() +slug: Web/API/Console/timeLog +tags: + - API + - Console Web + - DOM + - Développement Web + - Méthode + - console + - débogage +translation_of: Web/API/Console/timeLog +--- +<div>{{APIRef("Console API")}}</div> + +<p>Affiche dans la console la valeur actuelle d'un timer précédemment appelé par {{domxref("console.time()")}}</p> + +<p>Voir <a href="/en-US/docs/Web/API/console#Timers">Timers</a> dans la documentation pour des exemples et plus de détails</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">console.timeLog(<em>label</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>label</code></dt> + <dd>Le nom du timer à afficher sur la console</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Si aucun label n'est inclus</p> + +<pre>default: 1042ms</pre> + +<p>Si un <code>label</code> est inclus:</p> + +<pre>timer name: 1242ms</pre> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Si aucun timer n'est en cours d'éxecution, <code>timeLog()</code> retourne l'avertissement suivant :</p> + +<pre>Timer “default” doesn’t exist.</pre> + +<p>Si le paramètre label est spécifé mais aucun timer n'y correspond :</p> + +<pre> Timer “timer name” doesn’t exist. </pre> + +<h2 id="Exemples">Exemples</h2> + +<pre>console.time("answer time"); +alert("Click to continue"); +console.timeLog("answer time"); +alert("Do a bunch of other stuff..."); +console.timeEnd("answer time");</pre> + +<p>Le résultat de l'exemple ci-dessus montre le temps qu'a mis l'utilisateur à fermer la première pop-up d'alerte, puis le temps que l'utilisateur a pris pour fermer la seconde :</p> + +<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p> + +<p>Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par <code>timeLog()</code> et lorsque le timer est arrêté</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#timelog", "console.timeLog()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> + + +<p>{{Compat("api.Console.timeLog")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Documentation d'Opera Dragonfly: Console</a></li> +</ul> diff --git a/files/fr/web/api/console/timestamp/index.html b/files/fr/web/api/console/timestamp/index.html new file mode 100644 index 0000000000..2bc0f56843 --- /dev/null +++ b/files/fr/web/api/console/timestamp/index.html @@ -0,0 +1,42 @@ +--- +title: Console.timeStamp() +slug: Web/API/Console/timeStamp +tags: + - API + - DOM + - Développement + - Méthodes + - console +translation_of: Web/API/Console/timeStamp +--- +<div>{{APIRef("Console API")}}{{Non-standard_header}}</div> + +<p>Ajoute un seul marqueur à l'outil <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference">Performance</a> ou <a href="https://developer.mozilla.org/fr/docs/Outils/Performance/Waterfall">Waterfall</a> du navigateur. Cela vous permet de corréler un point de votre code avec les autres événements enregistrés dans la chronologie, tels que les événements de mise en page et de peinture.</p> + +<p>Vous pouvez éventuellement fournir un argument pour étiqueter l'horodatage, et cette étiquette sera ensuite affichée à côté du marqueur.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">console.timeStamp(label); +</pre> + +<h2 id="Paramètres">Paramètres</h2> + +<dl> + <dt><code>label</code></dt> + <dd>Étiquette pour l'horodatage. Facultatif.</dd> +</dl> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Console.timestamp")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Console.time()")}}</li> + <li>{{domxref("Console.timeEnd()")}}</li> + <li><a href="https://developer.mozilla.org/fr/docs/Outils/Performance/Waterfall#Marqueurs_de_temps">Ajout d'un marqueur de temps pour le Waterfall</a></li> +</ul> diff --git a/files/fr/web/api/console/trace/index.html b/files/fr/web/api/console/trace/index.html new file mode 100644 index 0000000000..35e3cf2838 --- /dev/null +++ b/files/fr/web/api/console/trace/index.html @@ -0,0 +1,69 @@ +--- +title: Console.trace() +slug: Web/API/Console/trace +tags: + - API + - DOM + - Développement + - Méthode + - console + - débogage + - trace +translation_of: Web/API/Console/trace +--- +<p>{{ APIRef("Console API") }}</p> + +<p>Affiche la <em>stack trace</em> dans la <a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web" title="Web Console">Web Console</a>.</p> + +<p>{{AvailableInWorkers}}</p> + +<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Stack_traces" title="en/DOM/console#Stack_traces">Stack traces</a> dans la documentation de {{ domxref("console") }} pour plus de détails et d'exemples.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">console.trace(); +</pre> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</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">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">trace</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Dans la console, la trace suivante sera affichée :</p> + +<pre class="line-numbers language-html"><code class="language-html">bar +foo +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>anonymous</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#trace", "console.trace()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition Initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Console.trace")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<p><a class="external external-icon" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></p> diff --git a/files/fr/web/api/console/warn/index.html b/files/fr/web/api/console/warn/index.html new file mode 100644 index 0000000000..4da87fa1a3 --- /dev/null +++ b/files/fr/web/api/console/warn/index.html @@ -0,0 +1,68 @@ +--- +title: Console.warn() +slug: Web/API/Console/warn +tags: + - API + - DOM + - Développement + - Méthode + - console + - débogage +translation_of: Web/API/Console/warn +--- +<p>{{ APIRef("Console API") }}</p> + +<p>Affiche un message d'avertissement dans la console web.</p> + +<p>{{AvailableInWorkers}}</p> + +<div class="note"><strong>Note:</strong> Dans Firefox, une icône de point d'exclamation est affichée à côté des messages d'avertissement</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<h2 id="Paramétres">Paramétres</h2> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd> + <dt><code>msg</code></dt> + <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd> +</dl> + +<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Outputting_text_to_the_console" title="en/DOM/console#Outputting_text_to_the_console">Outputting text to the console</a> dans la documentation de {{ domxref("console") }} pour plus de détails.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#warn", "console.warn()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Console.warn")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> +</ul> |