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

Kayce basque
Kayce basque
Sofia Emelianova
Sofia Emelianova

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:

$_ est l'expression la plus récemment évaluée.

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:

$_ change lorsque de nouvelles commandes sont évaluées.

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:

Exemple de 0 $.

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é:

Exemple de 1 $.

$(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:

Exemple de $(&#39;img&#39;).

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:

Exemple de $(&#39;img&#39;).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:

Exemple de $(&#39;img&#39;, div).src.

$$(selector [, startNode])

$$(selector) renvoie un tableau d'éléments qui correspondent au sélecteur CSS donné. Cette commande équivaut à appeler Array.from(document.querySelectorAll()).

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

Exemple d&#39;utilisation de<span class=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);
}

Exemple d&#39;utilisation de $() pour sélectionner toutes les images qui apparaissent après l&#39;élément div sélectionné dans le document et qui affichent leurs sources.

$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")

Exemple d&#39;utilisation d&#39;un sélecteur XPath.

L'exemple suivant renvoie tous les éléments <p> contenant des éléments <a>:

$x("//p[a]")

Exemple d&#39;utilisation d&#39;un sélecteur XPath plus complexe.

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.

Exemple d&#39;utilisation d&#39;un sélecteur XPath avec startNode

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

Rupture de l&#39;intérieur d&#39;une fonction avec debug()

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

Journalisation de document.body avec et sans fonction dir().

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

Inspecter un élément avec inspect()

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

Résultat de l&#39;utilisation de getEventListeners().

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:

Plusieurs écouteurs.

Vous pouvez développer chacun de ces objets pour explorer leurs propriétés:

Vue développée de l&#39;objet écouteur.

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:

Exemple de méthodes keys() et values().

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

Exemple de méthode monitor().

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

Événements de redimensionnement de la fenêtre de surveillance.

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:

Surveiller les événements clés

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

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

Exemple de méthode table().

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

Résultat de valeurs(player).