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 commande 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) comporte 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 appelé 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'interface utilisateur 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 directe de document.body 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 Elements (Éléments).
Cette méthode est équivalente à la console.dirxml() méthode.

inspect(object/function)

inspect(object/function) ouvre et sélectionne l'élément ou l'objet spécifié dans le panneau approprié : le panneau Elements (Éléments) pour les éléments DOM ou le panneau Profiles (Profils) pour les objets de tas 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 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é (par exemple, click ou keydown). 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 d'un objet.

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().

Supposons, par exemple, 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
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])

Lorsque l'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.

La commande suivante surveille tous les événements de redimensionnement sur l'objet window.
monitorEvents(window, "resize");



La commande suivante 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, des chaînes qui correspondent à des ensembles d'événements prédéfinis. Le tableau ci-dessous répertorie les types d'événements disponibles et leurs 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, la commande suivante 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 Elements (É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()
termine le profil, ouvre automatiquement le panneau Performance et affiche les résultats dans la piste Main (Principale).



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

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

Résultat dans Performance > Main (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 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() est le contexte d'exécution actuellement sélectionné dans la console.

table(data [, columns])

Consignez 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, procédez comme suit :
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



Pour copier un tableau consigné dans le presse-papiers sous forme de tableau Markdown mis en forme ou de données CSV, effectuez un clic droit sur le tableau dans la Console , puis sélectionnez l'option de copie correspondante dans le menu contextuel.

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 appelé. Cette commande est utilisée conjointement avec debug(fn).
undebug(getData);

unmonitor(function)

unmonitor(function) arrête la surveillance de la fonction spécifiée. Cette commande 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 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 la 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, "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);