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

L'exemple suivant utilise $$() 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 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, qui spécifie un élément ou un nœud à partir duquel rechercher des éléments.



effacer()

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'interrompt 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é. Il s'agit d'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 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 le panneau approprié: soit dans le panneau Éléments pour les éléments DOM, soit dans le panneau "Profils" pour les objets de segment JavaScript.

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



Lors de la transmission d'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 requête suivante répertorie tous les écouteurs d'événements enregistrés dans l'objet de 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 dans 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(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 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 (par souci 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 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 à une collection prédéfinie 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");



Le code suivant définit un tableau permettant de surveiller à la fois les événements de redimensionnement et de défilement sur l'objet window:
monitorEvents(window, ["resize", "scroll"])

Vous pouvez également spécifier l'un des "types d'événements disponibles" (chaînes qui correspondent à 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", "faire défiler", "zoom", "mettre au point", "flouter", "sélectionner", "modifier", "envoyer", "réinitialiser"

Par exemple, le code suivant utilise le type d'événement "clé" pour tous les événements clés correspondants dans 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([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 Performances > Canal principal.



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

Pour arrêter le profilage et afficher les résultats sur le canal Performances > Main, procédez comme suit:
profileEnd("Profile 1")

Résultat dans Performances > Canal principal:

 Piste principale." 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 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(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. Ainsi, lorsque la fonction est appelée, le débogueur ne l'est plus. 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. Par exemple, la commande suivante arrête toute 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 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(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);