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

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

É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(path [, 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> qui contiennent des éléments <a> :
$x("//p[a]")



Comme les autres fonctions de sélecteur, $x(path) possède un deuxième paramètre facultatif, startNode, qui spécifie un élément ou un nœud à partir duquel rechercher des éléments.



clear()

clear() efface l'historique de la console.
clear();

copy(object)

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

debug(function)

Lorsque la fonction spécifiée est appelée, le débogueur est invoqué et s'arrête à l'intérieur de 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'arrêt sur la fonction ou utilisez l'UI pour désactiver tous les points d'arrêt.

Pour en savoir plus sur les points d'arrêt, consultez Mettre en pause votre code avec des points d'arrêt.

dir(object)

dir(object) affiche une liste de style objet 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(object)

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(objet/fonction)

inspect(object/function) ouvre et sélectionne l'élément ou l'objet spécifié dans le panneau approprié : le panneau Éléments pour les éléments DOM ou le panneau Profils pour les objets de tas JavaScript.

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



Lorsque vous transmettez une fonction à inspecter, elle 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 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, la commande suivante liste 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 des objets.

keys(object)

keys(object) renvoie un tableau contenant les noms des propriétés appartenant à l'objet spécifié. Pour obtenir les valeurs associées des 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é), la saisie de keys(player) et de values(player) dans la console donne les résultats suivants :



monitor(function)

Lorsque la fonction spécifiée est appelée, un message est consigné dans la console. Il indique le nom de la fonction ainsi que les arguments qui lui sont transmis lors de son appel.
function sum(x, y) {
  return x + y;
}
monitor(sum);



Utilisez unmonitor(function) pour arrêter la surveillance.

monitorEvents(object [, events])

Lorsqu'un des événements spécifiés se produit sur l'objet spécifié, l'objet Event 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 à une collection d'événements prédéfinie. Reportez-vous aux exemples ci-dessous.

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



L'exemple suivant définit un tableau pour surveiller les événements "resize" et "scroll" sur l'objet window :
monitorEvents(window, ["resize", &quot;scroll"])

Vous pouvez également spécifier l'un des "types" d'événements disponibles, qui sont des chaînes de caractères correspondant à des ensembles d'événements prédéfinis. Le tableau ci-dessous répertorie 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
"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"

Par exemple, le code suivant utilise le type d'événement "key" pour 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");

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([name]) et profileEnd([name])

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



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

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

Résultat dans Performances > Principal :



Les profils peuvent également être imbriqués. Par exemple, les commandes suivantes fonctionneront dans n'importe quel ordre :
profile('A');
profile('B');
profileEnd('A&#39;);
profileEnd('B');



queryObjects(Constructor)

Appelez queryObjects(Constructor) depuis la console pour renvoyer un tableau d'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. Renvoie 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(data [, columns])

Enregistrez les données d'objet avec une mise en forme de tableau en transmettant un objet de données avec des en-têtes de colonne facultatifs.
Il s'agit d'un raccourci pour console.table().

Par exemple, pour afficher une liste de noms à l'aide d'un tableau dans la console, vous devez procéder 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. Ainsi, lorsque la fonction est appelée, le débogueur n'est plus invoqué. Cette propriété est utilisée conjointement avec debug(fn).
undebug(getData);

unmonitor(function)

unmonitor(function) arrête la surveillance de la fonction spécifiée. Cette propriété est utilisée conjointement 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, la commande suivante arrête toute la surveillance des événements sur l'objet de fenêtre :
unmonitorEvents(window);

Vous pouvez également arrêter sélectivement 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 arrête la surveillance des événements "mousemove" (peut-être pour réduire le bruit dans la sortie de la console) :
monitorEvents($0, "mouse");
unmonitorEvents($0, &quot;mousemove");

values(object)

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);