328 votes

Afficher la liste de toutes les variables JavaScript dans la console Google Chrome

Dans Firebug, l'onglet DOM affiche une liste de toutes vos variables et objets publics. Dans la console de Chrome, vous devez taper le nom de la variable ou de l'objet public que vous souhaitez explorer.

Existe-t-il un moyen - ou du moins une commande - pour que la console de Chrome affiche une liste de toutes les variables et objets publics ? Cela éviterait de devoir taper beaucoup de texte.

422voto

Nick Craver Points 313913

Est-ce le genre de résultats que vous recherchez ?

for(var b in window) { 
  if(window.hasOwnProperty(b)) console.log(b); 
}

Cela donnera la liste de tout ce qui est disponible sur le window (toutes les fonctions et variables, par exemple, $ y jQuery sur cette page, etc.) Cependant, il s'agit d'une liste assez longue ; je ne suis pas sûr qu'elle soit très utile...

Sinon, il suffit de faire window et commencer à descendre son arbre :

window

Cela vous donnera DOMWindow un objet extensible/explorable.

0 votes

DOMWindow n'a pas de hasOwnProperty méthode.

4 votes

@ntownsend -Ma console n'est pas d'accord avec vous :) C'est une propriété de object pourquoi ne l'aurait-il pas ?

0 votes

@Nick Craver - Retiré. Quand j'ai posté le commentaire ci-dessus, j'ai fait un test dans ma console qui a montré que window n'avait pas hasOwnProperty méthode. En effet, à l'époque, ce n'était pas le cas. Je viens de vérifier à nouveau, après avoir lu votre réponse, et ma console est maintenant d'accord pour dire que window dispose d'une telle méthode. Mystérieux.

82voto

Marcel Korpel Points 14633

Lorsque l'exécution du script est arrêtée (par exemple, sur un point d'arrêt), vous pouvez simplement visualiser tous les globaux dans le volet droit de la fenêtre des outils de développement :

chrome-globals

2 votes

Puis-je cracher les variables d'un contexte d'exécution, comme un spectacle de point d'arrêt, sans arrêter ?

1 votes

@MildFuzz Utilisez ensuite la solution de Nick Craver (la solution acceptée).

81voto

arkadiusm Points 81

Ouvrez la console et entrez :

  • keys(window) pour voir les variables
  • dir(window) pour voir les objets

0 votes

dir(Function("return this")()) le fait fonctionner aussi dans les Web Workers

5 votes

FYI dir(window) ne fonctionne pas dans Firefox (oui je sais que ce fil de discussion concernait Chrome), mais key(window) fonctionne dans Firefox

54voto

mheiber Points 290

Si vous voulez exclure toutes les propriétés standard de l'objet fenêtre et afficher les globales spécifiques à l'application, cela les imprimera dans la console Chrome :

{

    const standardGlobals = new Set(["window", "self", "document", "name", "location", "customElements", "history", "locationbar", "menubar", "personalbar", "scrollbars", "statusbar", "toolbar", "status", "closed", "frames", "length", "top", "opener", "parent", "frameElement", "navigator", "origin", "external", "screen", "innerWidth", "innerHeight", "scrollX", "pageXOffset", "scrollY", "pageYOffset", "visualViewport", "screenX", "screenY", "outerWidth", "outerHeight", "devicePixelRatio", "clientInformation", "screenLeft", "screenTop", "defaultStatus", "defaultstatus", "styleMedia", "onsearch", "isSecureContext", "performance", "onappinstalled", "onbeforeinstallprompt", "crypto", "indexedDB", "webkitStorageInfo", "sessionStorage", "localStorage", "onabort", "onblur", "oncancel", "oncanplay", "oncanplaythrough", "onchange", "onclick", "onclose", "oncontextmenu", "oncuechange", "ondblclick", "ondrag", "ondragend", "ondragenter", "ondragleave", "ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "onerror", "onfocus", "onformdata", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onload", "onloadeddata", "onloadedmetadata", "onloadstart", "onmousedown", "onmouseenter", "onmouseleave", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onmousewheel", "onpause", "onplay", "onplaying", "onprogress", "onratechange", "onreset", "onresize", "onscroll", "onseeked", "onseeking", "onselect", "onstalled", "onsubmit", "onsuspend", "ontimeupdate", "ontoggle", "onvolumechange", "onwaiting", "onwebkitanimationend", "onwebkitanimationiteration", "onwebkitanimationstart", "onwebkittransitionend", "onwheel", "onauxclick", "ongotpointercapture", "onlostpointercapture", "onpointerdown", "onpointermove", "onpointerup", "onpointercancel", "onpointerover", "onpointerout", "onpointerenter", "onpointerleave", "onselectstart", "onselectionchange", "onanimationend", "onanimationiteration", "onanimationstart", "ontransitionrun", "ontransitionstart", "ontransitionend", "ontransitioncancel", "onafterprint", "onbeforeprint", "onbeforeunload", "onhashchange", "onlanguagechange", "onmessage", "onmessageerror", "onoffline", "ononline", "onpagehide", "onpageshow", "onpopstate", "onrejectionhandled", "onstorage", "onunhandledrejection", "onunload", "alert", "atob", "blur", "btoa", "cancelAnimationFrame", "cancelIdleCallback", "captureEvents", "clearInterval", "clearTimeout", "close", "confirm", "createImageBitmap", "fetch", "find", "focus", "getComputedStyle", "getSelection", "matchMedia", "moveBy", "moveTo", "open", "postMessage", "print", "prompt", "queueMicrotask", "releaseEvents", "requestAnimationFrame", "requestIdleCallback", "resizeBy", "resizeTo", "scroll", "scrollBy", "scrollTo", "setInterval", "setTimeout", "stop", "webkitCancelAnimationFrame", "webkitRequestAnimationFrame", "chrome", "caches", "ondevicemotion", "ondeviceorientation", "ondeviceorientationabsolute", "originAgentCluster", "cookieStore", "showDirectoryPicker", "showOpenFilePicker", "showSaveFilePicker", "speechSynthesis", "onpointerrawupdate", "trustedTypes", "crossOriginIsolated", "openDatabase", "webkitRequestFileSystem", "webkitResolveLocalFileSystemURL"]);

    for (const key of Object.keys(window)) {
        if (!standardGlobals.has(key)) {
            console.log(key)
        }
    }
}

Le script fonctionne bien comme un bookmarklet. Pour utiliser le script comme un bookmarklet, créez un nouveau bookmark et remplacez l'URL par ce qui suit :

javascript:(() => {
    const standardGlobals = new Set(["window", "self", "document", "name", "location", "customElements", "history", "locationbar", "menubar", "personalbar", "scrollbars", "statusbar", "toolbar", "status", "closed", "frames", "length", "top", "opener", "parent", "frameElement", "navigator", "origin", "external", "screen", "innerWidth", "innerHeight", "scrollX", "pageXOffset", "scrollY", "pageYOffset", "visualViewport", "screenX", "screenY", "outerWidth", "outerHeight", "devicePixelRatio", "clientInformation", "screenLeft", "screenTop", "defaultStatus", "defaultstatus", "styleMedia", "onsearch", "isSecureContext", "performance", "onappinstalled", "onbeforeinstallprompt", "crypto", "indexedDB", "webkitStorageInfo", "sessionStorage", "localStorage", "onabort", "onblur", "oncancel", "oncanplay", "oncanplaythrough", "onchange", "onclick", "onclose", "oncontextmenu", "oncuechange", "ondblclick", "ondrag", "ondragend", "ondragenter", "ondragleave", "ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "onerror", "onfocus", "onformdata", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onload", "onloadeddata", "onloadedmetadata", "onloadstart", "onmousedown", "onmouseenter", "onmouseleave", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onmousewheel", "onpause", "onplay", "onplaying", "onprogress", "onratechange", "onreset", "onresize", "onscroll", "onseeked", "onseeking", "onselect", "onstalled", "onsubmit", "onsuspend", "ontimeupdate", "ontoggle", "onvolumechange", "onwaiting", "onwebkitanimationend", "onwebkitanimationiteration", "onwebkitanimationstart", "onwebkittransitionend", "onwheel", "onauxclick", "ongotpointercapture", "onlostpointercapture", "onpointerdown", "onpointermove", "onpointerup", "onpointercancel", "onpointerover", "onpointerout", "onpointerenter", "onpointerleave", "onselectstart", "onselectionchange", "onanimationend", "onanimationiteration", "onanimationstart", "ontransitionrun", "ontransitionstart", "ontransitionend", "ontransitioncancel", "onafterprint", "onbeforeprint", "onbeforeunload", "onhashchange", "onlanguagechange", "onmessage", "onmessageerror", "onoffline", "ononline", "onpagehide", "onpageshow", "onpopstate", "onrejectionhandled", "onstorage", "onunhandledrejection", "onunload", "alert", "atob", "blur", "btoa", "cancelAnimationFrame", "cancelIdleCallback", "captureEvents", "clearInterval", "clearTimeout", "close", "confirm", "createImageBitmap", "fetch", "find", "focus", "getComputedStyle", "getSelection", "matchMedia", "moveBy", "moveTo", "open", "postMessage", "print", "prompt", "queueMicrotask", "releaseEvents", "requestAnimationFrame", "requestIdleCallback", "resizeBy", "resizeTo", "scroll", "scrollBy", "scrollTo", "setInterval", "setTimeout", "stop", "webkitCancelAnimationFrame", "webkitRequestAnimationFrame", "chrome", "caches", "ondevicemotion", "ondeviceorientation", "ondeviceorientationabsolute", "originAgentCluster", "cookieStore", "showDirectoryPicker", "showOpenFilePicker", "showSaveFilePicker", "speechSynthesis", "onpointerrawupdate", "trustedTypes", "crossOriginIsolated", "openDatabase", "webkitRequestFileSystem", "webkitResolveLocalFileSystemURL"]);
    for (const key of Object.keys(window)) {
        if (!standardGlobals.has(key)) {
            console.log(key)
        }
    }
})()

2 votes

Il s'agit d'une liste des globaux par défaut actuels de Chrome et de Firefox : pastebin.com/wNj3kfg0

0 votes

Malheureusement, cette liste est dépassée, mais elle reste très utile ! Si j'avais plus de temps, je contribuerais à un moyen d'obtenir les StandardGlobals actuels dans une fenêtre vide d'une manière facile (rappelez-moi dans quelques heures et je devrais avoir du temps pour cela, au cas où quelqu'un serait intéressé et ne pourrait pas le faire lui-même).

1 votes

Mis à jour pour 2021, mais certaines des autres réponses semblent toujours d'actualité.

48voto

Fabien Ménager Points 45472

El window contient toutes les variables publiques. Vous pouvez donc le taper dans la console, puis développer pour afficher toutes les variables/attributs/fonctions.

chrome-show-all-variables-expand-window-object

4 votes

Joli ! C'est de loin le moyen le plus simple puisque vous pouvez développer les variables de manière récursive.

0 votes

C'est une bonne méthode pour voir document comme le fait le navigateur par les éléments et document. document(dot) pour les propriétés du document. Et window.document clarifie beaucoup de confusion sur fenêtre vs document

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X