Fonctions et sélecteurs d’utilitaires de l’outil console

L’API Utilitaires de la console contient un ensemble de variables et de fonctions de commodité permettant d’effectuer des tâches courantes, telles que :

  • Sélection et inspection des éléments DOM via les sélecteurs CSS.
  • Afficher les données dans un format lisible.
  • Arrêt et démarrage du profileur.
  • Surveillance des événements DOM.

Ces variables et fonctions ne fonctionnent qu’en les entrant directement dans la console DevTools ; Vous ne pouvez pas utiliser les variables et appeler les fonctions à partir de scripts.

Résumé

Variable ou fonction Description
Expression récemment évaluée : $_ Renvoie la valeur de l’expression la plus récemment évaluée.
Élément ou objet JavaScript récemment sélectionné : $0-$4 Renvoie un élément ou un objet JavaScript récemment sélectionné.
Sélecteur de requête : $(selector) Sélecteur de requête ; renvoie la référence au premier élément DOM avec le sélecteur CSS spécifié, comme document.querySelector().
Sélecteur de requête all : $$(selector, [startNode]) Sélecteur de requête all ; renvoie un tableau d’éléments qui correspondent au sélecteur CSS spécifié, comme document.querySelectorAll().
XPath : $x(path, [startNode]) Renvoie un tableau d’éléments DOM qui correspondent à l’expression XPath spécifiée.
clear() Efface la console de son historique.
copier (objet) Copie une représentation sous forme de chaîne de l’objet spécifié dans le Presse-papiers.
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 sur le panneau Sources.
dir(objet) Affiche une liste de style objet de toutes les propriétés de l’objet spécifié, comme console.dir().
dirxml(objet) Imprime une représentation XML de l’objet spécifié, tel qu’affiché dans l’outil Éléments , comme console.dirxml().
inspecter(objet/fonction) Ouvre et sélectionne l’élément DOM spécifié dans l’outil Éléments , ou l’objet de segment de mémoire JavaScript spécifié dans l’outil Mémoire .
getEventListeners(object) Renvoie les écouteurs d’événements enregistrés sur l’objet spécifié.
clés(objet) Renvoie un tableau contenant les noms des propriétés appartenant à l’objet spécifié.
Surveiller (fonction) Enregistre un message sur la console qui indique le nom de la fonction, ainsi que les arguments passés à la fonction dans le cadre d’une requête.
monitorEvents(object[, events]) Lorsque l’un des événements spécifiés se produit sur l’objet spécifié, l’objet d’événement est journalisé sur la console.
profil([nom]) Démarre une session de profilage de processeur JavaScript avec un nom facultatif.
profileEnd([nom]) Termine une session de profilage de processeur JavaScript et affiche les résultats dans l’outil Performances .
queryObjects(constructor) Renvoie un tableau des objets créés par le constructeur spécifié.
table(data[, columns]) Journalise les données d’un objet, formatées sous forme de tableau avec des en-têtes de colonne, pour l’objet de données spécifié.
undebug(function) Arrête le débogage de la fonction spécifiée de sorte que lorsque la fonction est demandée, le débogueur n’est plus appelé.
unmonitor(function) Arrête la surveillance de la fonction spécifiée.
unmonitorEvents(object[, events]) Arrête la surveillance des événements pour l’objet et les événements spécifiés.
valeurs(objet) Renvoie un tableau contenant les valeurs de toutes les propriétés appartenant à l’objet spécifié.

Expression récemment évaluée : $_

$_ Renvoie la valeur de l’expression la plus récemment évaluée.

Syntaxe :

$_

Exemple 1

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , tapez l’expression 2+2, puis appuyez sur Entrée.

    L’expression est évaluée et le résultat est affiché. La $_ variable est également définie en fonction du résultat de l’expression.

  3. Tapez $_, puis appuyez sur Entrée :

    L’outil Console montrant que la variable $_ renvoie le résultat de l’expression précédente

Exemple 2

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Collez le code suivant dans la console, puis appuyez sur Entrée :

    ["john", "paul", "george", "ringo"]

    L’expression évaluée est un tableau de noms.

  3. Tapez le code suivant dans la console, puis appuyez sur Entrée :

    $_.length

    L’expression $_.length est évaluée et 4 affichée dans la console car $_ elle fait référence à l’expression évaluée précédemment, qui est le tableau de noms. $_.length est la longueur du tableau de noms.

  4. Tapez le code suivant dans la console, puis appuyez sur Entrée :

    $_

    $_ fait toujours référence à l’expression précédemment évaluée, qui est désormais le chiffre 4.

    La valeur de $_ devient la valeur de l’expression évaluée précédemment

Élément ou objet JavaScript récemment sélectionné : $0-$4

$0, $1, $2$3, et $4 retourner des éléments ou objets JavaScript récemment sélectionnés.

$0 renvoie l’élément ou l’objet JavaScript le plus récemment sélectionné, $1 retourne le deuxième élément sélectionné le plus récemment, et ainsi de suite. Les $0, $1$2$3et $4 les variables fonctionnent comme une référence historique aux cinq derniers éléments DOM qui ont été inspectés dans l’outil Éléments, ou aux cinq derniers objets de segment de mémoire JavaScript qui ont été sélectionnés dans l’outil Mémoire.

Syntaxe

$0

Exemple

  1. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Commande+Option+I (macOS). DevTools s’ouvre.

  2. Dans l’outil Éléments , sélectionnez un élément, par exemple un <input> élément.

  3. Ouvrez l’outil Console dans le panneau Affichage rapide , au bas de DevTools.

  4. Tapez $0 dans l’outil Console , puis appuyez sur Entrée.

    La $0 variable retourne l’élément sélectionné <input> :

    Résultat de l’évaluation de la commande $0 dans la console

  5. Sélectionnez un autre élément dans l’outil Éléments , par exemple un <div> élément.

  6. Dans l’outil Console , tapez $0, puis appuyez sur Entrée.

    $0 fait référence à l’élément nouvellement sélectionné, qui est l’élément <div> .

  7. Tapez $1, puis appuyez sur Entrée.

    $1 fait référence à l’élément précédemment sélectionné, qui est l’élément <input> :

    Résultat de l’évaluation des commandes $0 et $1

Sélecteur de requête : $(selector)

$(selector) retourne la référence au premier élément DOM qui correspond au sélecteur selectorCSS spécifié.

Cette fonction est similaire à la fonction document.querySelector().

Si vous utilisez une bibliothèque telle que jQuery qui utilise $, la fonctionnalité est écrasée et $ correspond à l’implémentation de cette bibliothèque.

Syntaxe

$(selector, [parentElement])

Exemple 1

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , tapez $('input'). Le premier élément correspondant au input sélecteur CSS s’affiche :

    $('input') renvoie une référence au premier élément de la page web

  3. Cliquez avec le bouton droit sur le résultat renvoyé, puis sélectionnez Afficher dans le panneau Éléments pour le trouver dans le DOM, ou faites défiler jusqu’à Afficher pour l’afficher sur la page.

Exemple 2

La $() fonction accepte un deuxième paramètre, parentElement, qui spécifie un élément parent dans lequel effectuer la recherche. La valeur par défaut du paramètre est document, ce qui signifie que la page web entière est recherchée par défaut. En spécifiant un élément parent, vous pouvez rechercher des éléments dans une partie spécifique de la page Web.

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , tapez $('input', $('ul'))

    Le premier élément qui correspond au input sélecteur CSS trouvé dans le premier ul élément est réexécuté :

    Le résultat de $('input', $('ul'))

Sélecteur de requête all : $$(selector, [startNode])

$$() renvoie une liste d’éléments qui correspondent au sélecteur CSS spécifié, comme document.querySelectorAll().

Cette fonction est similaire à document.querySelectorAll() mais renvoie un array élément of, au lieu de .NodeList

Syntaxe

$$(selector, [parentElement])

Exemple 1

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , tapez $$('button'). Tous les <button> éléments de la page web sont affichés :

    Le résultat de $$('button')

Exemple 2

Cette $$() fonction prend également en charge un deuxième paramètre, parentElement, qui spécifie un élément parent dans lequel effectuer la recherche. La valeur par défaut du paramètre est document, ce qui signifie que la page web entière est recherchée par défaut. En spécifiant un élément parent, vous pouvez rechercher des éléments dans une partie spécifique de la page Web.

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , tapez $$('button', $('li.task')). Tous les <button> éléments qui sont des descendants du premier <li class="task"> élément sont affichés :

    Le résultat de $$('button', $('li.task'))

XPath : $x(path, [startNode])

$x(path) Renvoie un tableau d’éléments DOM qui correspondent à l’expression pathXPath spécifiée.

Syntaxe

$x(path, [parentElement])

Exemple 1

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , tapez $x("//li"). Tous les <li> éléments de la page web sont affichés :

    Utilisation d’un sélecteur XPath

Exemple 2

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , tapez $x("//li[button]"). Tous les <li> éléments qui contiennent des <button> éléments sont affichés :

    Utilisation d’un sélecteur XPath plus complexe

À l’instar des autres commandes de sélecteur, $x(path) comporte un deuxième paramètre facultatif, parentElement, qui spécifie un élément ou un nœud dans lequel rechercher des éléments.

clear()

clear() Efface la console de son historique.

Syntaxe

clear()

Exemple

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Pour créer l’historique dans l’outil Console , entrez plusieurs expressions JavaScript. Par exemple :

    for (let i = 0; i < 10; i++) {
    console.log(i);
}

  3. Pour effacer l’historique, tapez clear() dans l’outil Console , puis appuyez sur Entrée :

    Le résultat de la commande clear(), la console est vide et le message « la console a été effacée » apparaît

copier (objet)

copy(object) Copie une représentation sous forme de chaîne de l’objet spécifié dans le Presse-papiers.

Syntaxe

copy(object)

Exemple

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Entrez le code suivant dans l’outil Console , puis appuyez sur Entrée :

    copy($$('*').map(element => element.tagName));

    L’extrait de code sélectionne tous les éléments de la page Web à l’aide de la $$(selector) fonction, puis mappe la tagName propriété de chaque élément à un tableau. Le tableau est ensuite copié dans le presse-papiers à l’aide de la copy() fonction.

  3. Collez le contenu du Presse-papiers dans un éditeur de texte. Le contenu du Presse-papiers est une liste de toutes les balises HTML de la page Web, par exemple :

    ["HTML", "HEAD", "META", "TITLE", "LINK", "BODY", "H1", "FORM", "DIV", "LABEL", ...]

debug(function)

debug(function) s’interrompt à l’intérieur de la fonction function spécifiée dans l’outil Sources , lorsque cette fonction est appelée.

Une fois le débogueur suspendu, vous pouvez parcourir le code et le déboguer.

Syntaxe

debug(function)

Exemple

  1. Ouvrez un nouvel onglet ou une nouvelle fenêtre, puis accédez à une page qui contient une fonction JavaScript que vous souhaitez déboguer. Par exemple, accédez à la page de démonstration de l’application TODO .

  2. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  3. Dans l’outil Console , tapez debug(updateList).

  4. Dans la page Web rendue, ajoutez un nouvel élément TODO à la liste en tapant test dans le champ de texte Ajouter une tâche , puis en appuyant sur Entrée.

    Le débogueur s’arrête à l’intérieur de la updateList() fonction dans l’outil Sources :

    Le débogueur s’arrête à l’intérieur de la fonction updateList()

Utilisez-la undebug(function) pour arrêter la rupture de la fonction ou utilisez l’interface utilisateur pour désactiver tous les points d’arrêt.

Pour plus d’informations sur les points d’arrêt, voir Interrompre votre code avec des points d’arrêt.

dir(objet)

dir(object) Affiche une liste de style objet de toutes les propriétés de l’objet spécifié, comme console.dir().

Cette fonction est un alias pour console.dir().

Syntaxe

dir(object)

Exemple

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , appuyez sur Entrée document.head , puis appuyez sur Entrée.

    Une représentation HTML de l’élément s’affiche <head> .

  3. Entrée, dir(document.head) puis appuyez sur Entrée.

    Une liste de style objet de toutes les propriétés de l’élément s’affiche <head> :

    Journalisation de 'document.head' avec la fonction 'dir()'

Pour plus d’informations, consultez console.dir() dans l’API console.

dirxml(objet)

dirxml(object) imprime une représentation XML de l’objet spécifié, tel qu’affiché dans l’outil Elements , comme console.dirxml().

Cette fonction équivaut à console.dirxml().

Syntaxe

dirxml(object)

inspecter(objet/fonction)

inspect(element/function) ouvre et sélectionne l’élément DOM spécifié dans l’outil Éléments , ou la fonction JavaScript spécifiée dans l’outil Sources .

  • Pour un élément DOM, cette fonction ouvre et sélectionne l’élément DOM spécifié dans l’outil Elements .
  • Dans le cas d’une fonction JavaScript, celle-ci ouvre la fonction JavaScript spécifiée dans l’outil Sources .

Syntaxe

inspect(element/function)

Exemple

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , appuyez sur Entrée inspect(document.body) , puis appuyez sur Entrée.

    L’outil Éléments s’ouvre et l’élément <body> est sélectionné :

    Inspecter un élément avec inspect()

Lors de la transmission d’une fonction à inspecter, la fonction ouvre la page web dans l’outil Sources pour vous permettre d’inspecter.

getEventListeners(object)

getEventListeners(object) Renvoie les écouteurs d’événements enregistrés sur l’objet spécifié.

La valeur de retour est un objet qui contient un tableau pour chaque type d’événement inscrit (tel que click ou keydown). Les éléments de chaque tableau sont des objets qui décrivent l’écouteur inscrit pour chaque type.

Syntaxe

getEventListeners(object)

Exemple

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , appuyez sur Entrée getEventListeners($('form')) , puis appuyez sur Entrée.

    Les écouteurs d’événement enregistrés sur le premier <form> élément sont affichés :

    Résultat de l’utilisation de getEventListeners(form)

Si plusieurs écouteurs sont enregistrés sur l’objet spécifié, le tableau contient un membre pour chaque écouteur. Dans la figure suivante, deux écouteurs d’événement sont inscrits sur l’élément document pour l’événement click :

Plusieurs écouteurs d’événements enregistrés sur l’élément « document » pour l’événement « click »

clés(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, voir values(object), ci-dessous.

Syntaxe

keys(object)

Exemple

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , entrez le code suivant, puis appuyez sur Entrée :

    var player1 = {"name": "Ted", "level": 42}

    L’extrait de code ci-dessus définit un objet dans l’espace de noms global nommé player1, qui contient deux propriétés.

  3. Pour obtenir les noms des propriétés appartenant à l’objet player1 , entrez keys(player1) dans l’outil Console , puis appuyez sur Entrée :

    Le résultat de la fonction keys()

  4. Pour obtenir les valeurs des propriétés appartenant à l’objet player1 , entrez values(player1) dans l’outil Console , puis appuyez sur Entrée :

    Résultat de la fonction values()

Surveiller (fonction)

monitor(function) Enregistre un message sur la console chaque fois que la fonction spécifiée est appelée. Le message indique le nom de la fonction et les arguments transmis à la fonction.

Syntaxe

monitor(function)

Exemple

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , entrez le code suivant, puis appuyez sur Entrée :

    function sum(x, y) {
  return x + y;
}

    L’extrait de code ci-dessus définit une fonction nommée sum, qui accepte deux arguments.

  3. Pour commencer à surveiller la sum fonction, entrez monitor(sum) dans l’outil Console , puis appuyez sur Entrée :

  4. Pour appeler la fonction, entrez sum(1, 2) et appuyez sur Entrée. Un message s’affiche, indiquant que la sum fonction a été appelée et les arguments passés à la fonction :

    Le résultat de la fonction monitor()

Pour mettre fin à la surveillance, utilisez unmonitor(function).

monitorEvents(object[, events])

monitorEvents(object[, events]) Journalise un objet d’événement dans la console chaque fois que les événements spécifiés se produisent sur l’objet spécifié.

Vous pouvez spécifier un événement unique à 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.

Syntaxe

monitorEvents(object[, events])

Exemple 1

Pour surveiller un seul événement :

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , entrez le code suivant, puis appuyez sur Entrée :

    monitorEvents(window, "resize");

    L’extrait de code précédent surveille tous les événements de redimensionnement sur l’objet Windows.

  3. Redimensionnez la fenêtre, par exemple en agrandissant ou en réduisant DevTools. Les événements de redimensionnement s’affichent dans l’outil Console :

    Surveillance des événements de redimensionnement de fenêtre

Exemple 2

Pour surveiller plusieurs événements :

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , entrez le code suivant, puis appuyez sur Entrée :

    monitorEvents(window, ["resize", "scroll"]);

    L’extrait de code précédent définit un tableau de noms d’événements pour surveiller à la fois et resizescroll eevents sur l’objet window.

  3. Redimensionnez la fenêtre, par exemple en la raccourcissant, puis faites défiler la page web rendue. Les événements de redimensionnement et de défilement s’affichent dans l’outil Console :

    Surveillance des événements de redimensionnement et de défilement de la fenêtre

Exemple 3

Vous pouvez également spécifier une collection d’événements à l’aide de l’un des ensembles d’événements prédéfinis. Le tableau suivant indique les types d’événements disponibles et les mappages d’événements associés :

Type d’événement Événements mappés correspondants
mouse « click », « dblclick », « mousedown », « mousemove », « mouseout », « mouseover », « mouseup », « mousewheel »
key « keydown », « keypress », « keyup », « textInput »
touch « touchcancel », « touchend », « touchmove », « touchstart »
control « flouter », « changer », « concentrer », « réinitialiser », « redimensionner », « faire défiler », « sélectionner », « soumettre », « zoomer »

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Dans l’outil Console , entrez le code suivant, puis appuyez sur Entrée :

    monitorEvents(window, "key");

    L’extrait de code précédent surveille tous les événements du clavier sur l’objet window.

  3. Dans la page web rendue, appuyez sur n’importe quelle touche. Les événements de clavier s’affichent dans l’outil Console :

    Surveillance des événements clés

profil([nom])

profile([name]) démarre une session de profilage de processeur JavaScript avec un nom facultatif.

Pour terminer le profil et afficher les résultats dans l’outil Performances , appelez profileEnd([name]).

Syntaxe

profile([name])

Exemple

  1. Ouvrez la page dont vous souhaitez établir le profil dans un nouvel onglet ou une nouvelle fenêtre. Par exemple, accédez à la page de démonstration d’Animation lente .

  2. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  3. Pour démarrer le profilage, dans l’outil Console , tapez profile("My profile), puis appuyez sur Entrée.

  4. Pour arrêter le profilage, au bout d’un certain temps, tapez profileEnd("My profile"), puis appuyez sur Entrée.

    Les résultats du profil s’affichent dans l’outil Performances :

    Le résultat de la fonction profile()

Vous pouvez créer plusieurs profils en même temps, et vous n’êtes pas obligé de terminer chaque profil dans l’ordre de création. Par exemple, le code suivant crée deux profils, puis les termine dans l’ordre inverse :

profile('A');
profile('B');
profileEnd('B');
profileEnd('A');

profileEnd([nom])

profileEnd([name]) termine une session de profilage de processeur JavaScript et affiche les résultats dans l’outil Performances .

Pour appeler cette fonction, vous devez exécuter la fonction profile([name]).

Syntaxe

profileEnd([name])

Pour plus d’informations, voir profile([name]), ci-dessus.

queryObjects(constructor)

queryObjects(constructor) Renvoie un tableau des objets créés par le constructeur spécifié.

L’étendue de queryObjects() est le contexte d’exécution actuellement sélectionné dans la console.

Syntaxe

queryObjects(constructor)

Exemple

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Pour renvoyer toutes les instances des éléments HTML, entrez queryObjects(HTMLElement) dans l’outil Console , puis appuyez sur Entrée :

    Le résultat de la fonction queryObjects()

Autres exemples :

  • Permet queryObjects(Promise) de renvoyer toutes les instances d’objets si votre page web utilise Promise des Promise objets.
  • Utilisez cette fonction queryObjects(ClassName) pour renvoyer toutes les instances de la ClassName classe si votre page web utilise des classes JavaScript.

table(data[, columns])

table(data[, columns]) Enregistre les données de l’objet, formatées sous forme de tableau avec des en-têtes de colonne, pour l’objet de données spécifié.

Cette fonction est un alias pour console.table().

Syntaxe

table(data[, columns])

Exemple

Pour afficher une liste de noms de personnes sous forme de tableau, dans la console :

  1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console s’ouvre dans DevTools, en regard de la page web.

  2. Entrez le code suivant dans la console, puis appuyez sur Entrée :

    var names = {
  0: {
    firstName: "John",
    lastName: "Smith"
  },
  1:  {
    firstName: "Jane",
    lastName: "Doe"
  }
};

    L’extrait de code ci-dessus définit un objet dans l’espace de noms global nommé names, qui contient deux propriétés.

  3. Pour afficher l’objet names sous forme de tableau, entrez table(names) dans la console, puis appuyez sur Entrée :

    Le résultat de la fonction table()

undebug(function)

undebug(function) Arrête le débogage de la fonction spécifiée de sorte que lorsque la fonction s’exécute, le débogueur ne s’arrête plus dans la fonction.

Pour plus d’informations, consultez debug(function) ci-dessus.

Syntaxe

undebug(function)

unmonitor(function)

unmonitor(function) Arrête la surveillance de la fonction spécifiée.

Pour plus d’informations, reportez-vous à monitor(function) ci-dessus.

Syntaxe

unmonitor(function)

unmonitorEvents(object[, events])

unmonitorEvents(object[, events]) Arrête la surveillance des événements pour l’objet et les événements spécifiés.

Pour plus d’informations, consultez monitorEvents(object[, events]), ci-dessus.

Syntaxe

unmonitorEvents(object[, events])

valeurs(objet)

values(object) Renvoie un tableau contenant les valeurs de toutes les propriétés appartenant à l’objet spécifié.

Pour obtenir les clés associées aux mêmes propriétés, voir keys(object) ci-dessus.

Syntaxe

values(object)

Exemple

Voir l’exemple dans keys(object) ci-dessus.

Voir aussi

Remarque

Certaines parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisé conformément aux conditions décrites dans la licence internationale Creative Commons Attribution 4.0. La page originale se trouve ici et est écrite par Kayce Basques.

Creative Commons License Ce travail est sous licence Creative Commons Attribution 4.0 International.

  • Last updated on