L'API Console Utilities contient un ensemble de fonctions pratiques permettant d'effectuer des tâches courantes: sélectionner et inspecter des éléments DOM, interroger des objets, afficher des données dans un format lisible, arrêter et démarrer le profileur, surveiller les événements DOM et les appels de fonction, etc.
Vous recherchez console.log()
, console.error()
et les autres fonctions console.*
? Consultez la documentation de référence de l'API Console.
$_
$_
renvoie la valeur de l'expression évaluée la plus récente.
Dans l'exemple suivant, une expression simple (2 + 2
) est évaluée. La propriété $_
est ensuite évaluée, et elle contient la même valeur:
Dans l'exemple suivant, l'expression évaluée contient initialement un tableau de noms. En évaluant $_.length
pour trouver la longueur du tableau, la valeur stockée dans $_
devient la dernière expression évaluée, à savoir 4:
0 - 4 $
Les commandes $0
, $1
, $2
, $3
et $4
fonctionnent comme une référence historique aux cinq derniers éléments DOM inspectés dans le panneau Éléments ou aux cinq derniers objets de segment de mémoire JavaScript sélectionnés dans le panneau "Profils". $0
renvoie le dernier élément ou l'objet JavaScript sélectionné, $1
renvoie le deuxième élément sélectionné en dernier, et ainsi de suite.
Dans l'exemple suivant, un élément img
est sélectionné dans le panneau Éléments. Dans le panneau Console, $0
a été évalué et affiche le même élément:
L'image ci-dessous montre un autre élément sélectionné sur la même page. $0
fait désormais référence à un élément nouvellement sélectionné, tandis que $1
renvoie l'élément précédemment sélectionné:
$(selector [, startNode])
$(selector)
renvoie la référence au premier élément DOM avec le sélecteur CSS spécifié. Lorsqu'elle est appelée avec un argument, cette fonction est un raccourci de la fonction document.querySelector().
L'exemple suivant renvoie une référence au premier élément <img>
du document:
Effectuez un clic droit sur le résultat renvoyé et sélectionnez Afficher dans le panneau des éléments pour le trouver dans le DOM, ou Faites défiler pour l'afficher pour l'afficher sur la page.
L'exemple suivant renvoie une référence à l'élément actuellement sélectionné et affiche sa propriété src
:
Cette fonction accepte également un deuxième paramètre, startNode
, qui spécifie un "élément" ou un nœud à partir duquel rechercher des éléments. La valeur par défaut de ce paramètre est document
.
L'exemple suivant renvoie une référence au premier élément img
, qui est un descendant de devsite-header-background
, et affiche sa propriété src
:
$$(selector [, startNode])
L'exemple suivant utilise $$(selector) renvoie un tableau d'éléments qui correspondent au sélecteur CSS donné. Cette commande équivaut à appeler
Array.from(document.querySelectorAll())
.
$$()
to create an array of all <img>
elements in the current document
and displays the value of each element's src
property:let images = $$('img');
for (let each of images) {
console.log(each.src);
}
.
l10n-placeholder3() pour créer un tableau de tous les éléments <img>
qui apparaissent dans le document actuel après le nœud sélectionné:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
console.log(each.src);
}
$x(chemin [, startNode])
$x(path)
renvoie un tableau d'éléments DOM correspondant à l'expression XPath donnée.
Par exemple, la requête suivante renvoie tous les éléments <p>
de la page:
$x("//p")
L'exemple suivant renvoie tous les éléments <p>
contenant des éléments <a>
:
$x("//p[a]")
Comme les autres fonctions de sélecteur, $x(path)
comporte un deuxième paramètre facultatif, startNode
, qui spécifie un élément ou un nœud à partir duquel rechercher des éléments.
effacer()
clear()
efface l'historique de la console.
clear();
copier(objet)
copy(object)
copie une représentation de l'objet spécifié sous forme de chaîne dans le presse-papiers.
copy($0);
débogage(fonction)
Lorsque la fonction spécifiée est appelée, le débogueur est appelé et endommage la fonction dans le panneau Sources, ce qui permet de parcourir le code et de le déboguer.
debug(getData);
Utilisez undebug(fn)
pour arrêter l'interruption de la fonction ou utilisez l'interface utilisateur pour désactiver tous les points d'arrêt.
Pour en savoir plus sur les points d'arrêt, consultez Suspendre votre code avec des points d'arrêt.
dir(object)
dir(object)
affiche une liste de toutes les propriétés de l'objet spécifié. Cette méthode est un raccourci pour la méthode console.dir()
de l'API Console.
L'exemple suivant montre la différence entre l'évaluation de document.body
directement dans la ligne de commande et l'utilisation de dir()
pour afficher le même élément:
document.body;
dir(document.body);
Pour en savoir plus, consultez l'entrée console.dir()
dans l'API Console.
dirxml(objet)
dirxml(object)
affiche une représentation XML de l'objet spécifié, comme indiqué dans le panneau Éléments.
Cette méthode est équivalente à la méthode console.dirxml()
.
inspect(object/function)
inspect(object/function)
s'ouvre et sélectionne l'élément ou l'objet spécifié dans le panneau approprié: soit le panneau Éléments pour les éléments DOM, soit le panneau "Profils" pour les objets de segment de mémoire JavaScript.
L'exemple suivant ouvre document.body
dans le panneau Éléments:
inspect(document.body);
Lorsque vous transmettez une fonction à inspecter, celle-ci ouvre le document dans le panneau Sources pour que vous puissiez l'inspecter.
getEventListeners(object)
getEventListeners(object)
renvoie les écouteurs d'événements enregistrés sur l'objet spécifié. La valeur renvoyée est un objet contenant un tableau pour chaque type d'événement enregistré (click
ou keydown
, par exemple). Les membres de chaque tableau sont des objets qui décrivent l'écouteur enregistré pour chaque type. Par exemple, la liste suivante répertorie tous les écouteurs d'événements enregistrés sur l'objet document:
getEventListeners(document);
Si plusieurs écouteurs sont enregistrés sur l'objet spécifié, le tableau contient un membre pour chaque écouteur. Dans l'exemple suivant, deux écouteurs d'événements sont enregistrés sur l'élément de document pour l'événement click
:
Vous pouvez développer chacun de ces objets pour explorer leurs propriétés:
Pour en savoir plus, consultez Inspecter les propriétés de l'objet.
key(objet)
keys(object)
renvoie un tableau contenant les noms des propriétés appartenant à l'objet spécifié. Pour obtenir les valeurs associées aux mêmes propriétés, utilisez values()
.
Par exemple, supposons que votre application ait défini l'objet suivant:
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
En supposant que player
ait été défini dans l'espace de noms global (pour plus de simplicité), si vous saisissez keys(player)
et values(player)
dans la console, vous obtenez le résultat suivant:
monitor(function)
Lorsque la fonction spécifiée est appelée, un message est consigné dans la console. Il indique son nom, ainsi que les arguments transmis à la fonction lorsqu'elle a été appelée.
function sum(x, y) {
return x + y;
}
monitor(sum);
Utilisez unmonitor(function)
pour arrêter la surveillance.
monitorEvents(object [, events])
Lorsque l'un des événements spécifiés se produit sur l'objet spécifié, celui-ci est consigné dans la console. Vous pouvez spécifier un seul événement à surveiller, un tableau d'événements ou l'un des "types" d'événements génériques mappés sur une collection prédéfinie d'événements. Voir les exemples ci-dessous.
La commande suivante surveille tous les événements de redimensionnement de l'objet window.
monitorEvents(window, "resize");
Le tableau suivant définit un tableau pour surveiller les événements "resize" et "scroll" sur l'objet window:
monitorEvents(window, ["resize", "scroll"])
Vous pouvez également spécifier l'un des "types d'événements" disponibles, à savoir des chaînes correspondant à des ensembles prédéfinis d'événements. Le tableau ci-dessous liste les types d'événements disponibles et les mappages d'événements associés:
Type d'événement et événements mappés correspondants | |
---|---|
souris | "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel" |
clé | "keydown", "keyup", "keypress", "textInput" |
tactile | "touchstart", "touchmove", "touchend", "touchcancel" |
contrôle | "redimensionner", "défiler", "zoom", "focus", "flou", "sélectionner", "modifier", "envoyer", "réinitialiser" |
Par exemple, la requête suivante utilise le type d'événement "clé" tous les événements de touche correspondants sur un champ de texte d'entrée actuellement sélectionné dans le panneau Éléments.
monitorEvents($0, "key");
Vous trouverez ci-dessous un exemple de résultat après la saisie de caractères dans le champ de texte:
Utilisez unmonitorEvents(object[, events])
pour arrêter la surveillance.
profile([name]) et profileEnd([name])
profile()
démarre une session de profilage de processeur JavaScript avec un nom facultatif. profileEnd()
remplit le profil et affiche les résultats dans le canal Performances > Suivi principal.
Pour commencer le profilage:
profile("Profile 1")
Pour arrêter le profilage et afficher les résultats dans le canal Performance > Main (Performances) :
profileEnd("Profile 1")
Résultat dans le canal Performances > Principal:
Main track." width="800" height="606">
Les profils peuvent également être imbriqués. Par exemple, cela fonctionnera dans n'importe quel ordre:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');
queryObjects(Constructor)
Appelez queryObjects(Constructor)
à partir de la console pour renvoyer un tableau d'objets créés avec le constructeur spécifié. Exemple :
queryObjects(Promise)
: renvoie toutes les instances dePromise
.queryObjects(HTMLElement)
: renvoie tous les éléments HTML.queryObjects(foo)
, oùfoo
est un nom de classe. Renvoie tous les objets instanciés vianew foo()
.
Le champ d'application de queryObjects()
correspond au contexte d'exécution actuellement sélectionné dans la console.
table(données [, colonnes])
Consigner les données d'objet de journal avec une mise en forme de tableau en transmettant un objet de données avec des en-têtes de colonne facultatifs.
Raccourci de console.table()
.
Par exemple, pour afficher une liste de noms à l'aide d'une table dans la console, procédez comme suit:
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);
undebug(fonction)
undebug(function)
arrête le débogage de la fonction spécifiée. Ainsi, lorsque la fonction est appelée, le débogueur n'est plus appelé. Cette fonctionnalité est utilisée de concert avec debug(fn)
.
undebug(getData);
retirer(fonction)
unmonitor(function)
arrête la surveillance de la fonction spécifiée. Ceci est utilisé de concert avec monitor(fn)
.
unmonitor(getData);
unmonitorEvents(object [, events])
unmonitorEvents(object[, events])
arrête la surveillance des événements pour l'objet et les événements spécifiés. Par exemple, le code suivant arrête la surveillance des événements sur l'objet window:
unmonitorEvents(window);
Vous pouvez également arrêter de manière sélective la surveillance d'événements spécifiques sur un objet. Par exemple, le code suivant commence à surveiller tous les événements de souris sur l'élément actuellement sélectionné, puis cesse de surveiller les événements "mousemove" (par exemple, pour réduire le bruit dans la sortie de la console):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");
valeurs(objet)
values(object)
renvoie un tableau contenant les valeurs de toutes les propriétés appartenant à l'objet spécifié.
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
values(player);