Documentation de référence de l'API Console Utilities

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}

<img> éléments
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 d'accès [, 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 pour les autres fonctions de sélecteur, $x(path) possède un deuxième paramètre facultatif, startNode,
spécifiant un élément ou un nœud à partir duquel rechercher des éléments.



clear()

clear() efface son historique dans la console.
clear();

copie(objet)

copy(object) copie une représentation sous forme de chaîne de l'objet spécifié dans le presse-papiers.
copy($0);

débogage(fonction)

Lorsque la fonction spécifiée est appelée, le débogueur l'est et l'interdit dans la fonction
Panneau Sources permettant 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 le
ligne de commande et en utilisant 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 Elements (É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 la
panneau: soit le panneau Elements pour les éléments DOM, soit le panneau "Profils" pour les objets de segments de mémoire JavaScript.

L'exemple suivant ouvre document.body dans le panneau Elements (Éléments) :
inspect(document.body);



Lorsque vous transmettez une fonction à inspecter, celle-ci ouvre automatiquement le document dans le panneau Sources.
à inspecter.

getEventListeners(object)

getEventListeners(object) renvoie les écouteurs d'événements enregistrés sur l'objet spécifié. La
La valeur renvoyée est un objet qui contient 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, voici la liste de tous les écouteurs d'événements enregistrés dans le document
objet:
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 au niveau
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 d'un objet.

keys(objet)

keys(object) renvoie un tableau contenant les noms des propriétés appartenant aux
. Pour obtenir les valeurs associées aux mêmes propriétés, utilisez values().

Par exemple, supposons que votre application définisse 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é), en saisissant keys(player) et
values(player) dans la console donne les résultats suivants:



moniteur(fonction)

Lorsque la fonction spécifiée est appelée, un message est consigné dans la console, indiquant la
nom de la fonction, 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 événements génériques
"types" associées à un ensemble prédéfini d'événements. Reportez-vous aux exemples ci-dessous.

Le code suivant surveille tous les événements de redimensionnement de l'objet window.
monitorEvents(window, "resize");



L'exemple suivant définit un tableau permettant de surveiller à la fois le "redimensionnement" et "faire défiler" 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 mappées à des ensembles prédéfinis de
é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", "faire défiler", "zoom", "mettre au point", "flouter", "sélectionner", "modifier", "envoyer", "réinitialiser"

Par exemple, le code suivant utilise la valeur "key" Type d'événement : tous les événements clés correspondants sur un texte d'entrée
actuellement sélectionné dans le panneau Elements.
monitorEvents($0, "key");

Voici un exemple de résultat après avoir saisi des caractères dans le champ de texte:



Utilisez unmonitorEvents(object[, events]) pour arrêter la surveillance.

profile([nom]) et profileEnd([nom])

profile() démarre une session de profilage de processeur JavaScript avec un nom facultatif. profileEnd()
complète le profil et affiche les résultats dans la section Performances > Canal principal.



Pour commencer le profilage:
profile("Profile 1")

Pour arrêter le profilage et afficher les résultats dans la section Performance > Piste principale:
profileEnd("Profile 1")

Résultat dans le rapport Performances > Piste principale:



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) depuis la console pour renvoyer un tableau des objets créés.
avec le constructeur spécifié. Exemple :


queryObjects(Promise) Renvoie toutes les instances de Promise.
queryObjects(HTMLElement) Renvoie tous les éléments HTML.
queryObjects(foo), où foo est un nom de classe. Renvoyer tous les objets instanciés
via new foo().


Le champ d'application de queryObjects() correspond au contexte d'exécution actuellement sélectionné dans la console.

table(données [, colonnes])

Consignez les données d'objet avec la mise en forme du tableau en transmettant un objet de données avec des en-têtes de colonne facultatifs.
Raccourci pour console.table().

Par exemple, pour afficher une liste de noms à l'aide d'un tableau dans la console, procédez comme suit:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



undebug(function)

undebug(function) arrête le débogage de la fonction spécifiée de sorte que lorsque la fonction est
est appelé, le débogueur n'est plus appelé. Il est utilisé de concert avec debug(fn).
undebug(getData);

unmonitor(function)

unmonitor(function) arrête la surveillance de la fonction spécifiée. Il est utilisé de concert avec
monitor(fn)
unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) arrête de surveiller les événements pour l'objet et les événements spécifiés. Pour
Dans l'exemple suivant, la commande suivante arrête la surveillance des événements sur l'objet "window" (fenêtre) :
unmonitorEvents(window);

Vous pouvez également arrêter de manière sélective la surveillance d'événements spécifiques sur un objet. Par exemple :
commence à surveiller tous les événements de souris sur l'élément actuellement sélectionné, puis arrête la surveillance
"mousemove" (peut-être pour réduire le bruit dans la sortie de la console):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

values(objet)

values(object) renvoie un tableau contenant les valeurs de toutes les propriétés appartenant au
.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);