Fonctions d'aide de la Console Web

Les commandes

La ligne de commande JavaScript fournie par la Console Web, offre de nombreuses fonctions d'aide pour rendre certaines tâches plus simples.

$()

Analyse le sélecteur CSS, et retourne le premier élément correspondant. Équivalent à document.querySelector(), ou appelle la fonction $ de la page, si elle existe.

$$()

Analyse le sélecteur CSS, et retourne une liste de nœud DOM correspondant. C'est un raccourci de document.querySelectorAll()

Depuis Firefox 41, cette méthode n'est plus un raccourci pour document.querySelectorAll() et à la place retourne un tableau d'éléments.

$0

L'élément actuellement inspecté sur la page.

$_

Nouveau dans Firefox 39. 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 entrée et ensuite $_ puis entrée, la console affichera 4.

$x()

Evalue une expression XPath et renvoie un tableau des nœuds correspondant.

keys()

À partir d'un objet, retourne une liste de ses clefs (keys, ou nom de propriété) . C'est un raccourci de Object.keys.

values()

À partir d'un objet, retourne une liste de ses valeurs ; à utiliser avec keys().

clear()

Vide l'affichage des messages de la console.

inspect()

À partir d'un objet, ouvre un inspecteur d'objet.

pprint()

Formate la valeur fournie sous une forme lisible (pretty-print) ; utile pour afficher le contenu d'objets ou de tableaux.

help()

Affiche un texte d'aide. En fait, dans un parfait exemple de récursion, cette commande vous amène à cette page.

cd()

Change le contexte de l'évaluation JavaScript vers une autre iframe dans la page. Voir travailler avec des iframes.

copy()

Nouveau dans Firefox 38. Copie l'argument dans le presse-papier. Si l'argument est une chaine de caractères, elle est copiée telle quel. Sinon la méthode JSON.stringify sera appelée sur l'argument et le résultat sera copié dans le presse-papier.

clearHistory()

Nouveau dans Firefox 39. Exactement comme une ligne de commande normale, la ligne de commande de la console se souvient des commandes tapées.

Référez-vous à l'API Console pour plus d'informations sur comment journaliser depuis le contenu.

Exemples

Exemple : Voir le contenu d'un nœud DOM

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.

Regardez le contenu du nœud en utilisant les fonctions $() et inspect() :

inspect($("#content"))

Ceci ouvre automatiquement l'inspecteur d'objet, vous montrant le contenu du nœud DOM qui correspond au sélecteur CSS "#content".

Exemple : Afficher le contenu d'un nœud DOM

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  pprint() :

pprint($("#content"))

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.