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
|
---
title: Fonctions d'aide de la Console Web
slug: Outils/Console_Web/Fonctions_d_aide
tags:
- Debugging
- Web Development
- web console
translation_of: Tools/Web_Console/Helpers
---
<div>{{ToolsSidebar}}</div>
<h2 id="Les_commandes">Les commandes</h2>
<p>La ligne de commande JavaScript fournie par la Console Web, offre de nombreuses fonctions d'aide pour rendre certaines tâches plus simples.</p>
<ul>
<li>Un sélecteur passé à <code>document.querySelector</code> pour localiser l'iframe.</li>
<li>L'élément iframe lui même</li>
<li>La fenêtre de contenu de l'iframe</li>
</ul>
<dl>
<dt><code>$()</code></dt>
<dd>Analyse le sélecteur CSS, et retourne le premier élément correspondant. Équivalent à {{ domxref("document.querySelector()") }}, ou appelle la fonction $ de la page, si elle existe.</dd>
<dt><code>$$()</code></dt>
<dd>Analyse le sélecteur CSS, et retourne une liste de nœud DOM correspondant. C'est un raccourci de {{ domxref("document.querySelectorAll()") }}</dd>
<dd>Depuis Firefox 41, cette méthode n'est plus un raccourci pour {{ domxref("document.querySelectorAll()")}} et à la place retourne un tableau d'éléments.</dd>
<dt><code>$0</code></dt>
<dd>L'élément actuellement inspecté sur la page.</dd>
<dt><code>$_</code></dt>
<dd><em>Nouveau dans Firefox 39. </em>Stocke le résultat de la dernière expression exécutée dans la ligne de commande de la console. Par exemple, taper 2+2 puis <kbd>entrée</kbd> et ensuite $_ puis <kbd>entrée</kbd>, la console affichera 4.</dd>
<dt><code>$x()</code></dt>
<dd>Evalue une expression <a href="/fr/docs/XPath" title="/fr/docs/XPath">XPath </a>et renvoie un tableau des nœuds correspondant.</dd>
<dt><code>keys()</code></dt>
<dd>À partir d'un objet, retourne une liste de ses clefs (<em>keys</em>, ou nom de propriété) . C'est un raccourci de <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys</code></a>.</dd>
<dt><code>values()</code></dt>
<dd>À partir d'un objet, retourne une liste de ses valeurs ; à utiliser avec <code>keys()</code>.</dd>
<dt><code>clear()</code></dt>
<dd>Vide l'affichage des messages de la console.</dd>
<dt><code>inspect()</code></dt>
<dd>À partir d'un objet, ouvre un inspecteur d'objet.</dd>
<dt><code>pprint()</code></dt>
<dd>Formate la valeur fournie sous une forme lisible (<em>pretty-print)</em> ; utile pour afficher le contenu d'objets ou de tableaux.</dd>
<dt><code>help()</code></dt>
<dd>Affiche un texte d'aide. En fait, dans un parfait exemple de récursion, cette commande vous amène à cette page.</dd>
<dt><code>cd()</code></dt>
<dd>Change le contexte de l'évaluation JavaScript vers une autre iframe dans la page. Cet helper accepte différent inputs. Il est possible de fournir :</dd>
<dd>Voir <a href="/fr/docs/Tools/Web_Console#Working_with_iframes" title="/fr/docs/Tools/Web_Console#Working_with_iframes">travailler avec des iframes</a>.</dd>
<dt><code>copy()</code></dt>
<dd><em>Nouveau dans Firefox 38.</em> Copie l'argument dans le presse-papier. Si l'argument est une chaine de caractères, elle est copiée telle quelle. Sinon la méthode <code><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify</a></code> sera appelée sur l'argument et le résultat sera copié dans le presse-papier.</dd>
<dt><code>clearHistory()</code></dt>
<dd><em>Nouveau dans Firefox 39.</em> Exactement comme une ligne de commande normale, la ligne de commande de la console <a href="/fr/docs/Tools/Web_Console#Command_history">se souvient des commandes tapées</a>.</dd>
<dt>Référez-vous à l'<a href="/fr/docs/Web/API/console" title="/fr/docs/Web/API/console">API Console</a> pour plus d'informations sur comment journaliser depuis le contenu.</dt>
</dl>
<h2 id="Variables">Variables</h2>
<dl>
<dt id="tempN">temp<em>N</em></dt>
<dd>L'option <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use in Console">"Utiliser dans la Console"</a> de l'Inspecteur génère une variable pour un noeud nommé <code>temp0</code>, <code>temp1</code>, <code>temp2</code>, etc. Afin de référencer le noeud.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_Voir_le_contenu_dun_nœud_DOM">Exemple : Voir le contenu d'un nœud DOM</h3>
<p>Supposons que nous avons un nœud DOM avec l'ID "content". En fait, la page que vous êtes en train de lire actuellement en possède un, vous pouvez ainsi directement ouvrir la Console Web et essayer.</p>
<p>Regardez le contenu du nœud en utilisant les fonctions <code>$()</code> et <code>inspect()</code> :</p>
<pre class="brush: js notranslate">inspect($("#content"))</pre>
<p>Ceci ouvre automatiquement l'inspecteur d'objet, vous montrant le contenu du nœud DOM qui correspond au sélecteur CSS "#content".</p>
<h3 id="Exemple_Afficher_le_contenu_dun_nœud_DOM">Exemple : Afficher le contenu d'un nœud DOM</h3>
<p>Imaginons que vous déboguez à distance pour un utilisateur, et que vous avez besoin du contenu du nœud. Vous pouvez demander à votre utilisateur d'ouvrir la Console Web et d'afficher le contenu du nœud dans la console, de copier le texte et de vous l'envoyer par e-mail, en utilisant la fonction <code>pprint()</code> :</p>
<pre class="brush: js notranslate">pprint($("#content"))
</pre>
<p>Ceci écrit tout le contenu du nœud afin que vous puissiez le lire. Bien entendu, cette commande est plus utile sur des objets autres qu'un nœud DOM.</p>
|
