Ver la lista de todas las variables de JavaScript en Google Chrome Console


237

En Firebug, la pestaña DOM muestra una lista de todas sus variables y objetos públicos. En la consola de Chrome, debe escribir el nombre de la variable pública u objeto que desea explorar.

¿Hay alguna forma, o al menos un comando, para que la consola de Chrome muestre una lista de todas las variables y objetos públicos? Ahorrará mucho tipeo.

Respuestas:


330

¿Es este el tipo de salida que estás buscando?

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

Esto enumerará todo lo disponible en el windowobjeto (todas las funciones y variables, por ejemplo, $y jQueryen esta página, etc.). Sin embargo, esta es toda una lista; no estoy seguro de lo útil que es ...

De lo contrario, simplemente hazlo windowy empieza a bajar por su árbol

window

Esto le dará DOMWindowun objeto expandible / explorable.


44
@ntownsend -Mi consola no está de acuerdo contigo :) Es una propiedad deobject , ¿por qué no la tendría?
Nick Craver

99
"¿Por qué no lo tendría?" La [[Prototype]]propiedad interna del objeto global depende de la implementación , en casi todas las implementaciones principales -V8, Spidermonkey, Rhino, etc.-, el objeto global hereda en algún momento Object.prototype, pero por ejemplo en otras implementaciones -JScript, BESEN, DMDScript, etc. ..- no existe, así window.hasOwnPropertyque no existe, para probarlo podemos:Object.prototype.isPrototypeOf(window);
CMS

10
@CMS: Sí, eso es cierto ... pero la pregunta es específicamente sobre Chrome, por lo que se conoce la implementación.
Nick Craver

66
O simplemente podrías escribir esto;
Eddie B

2
También quería ver el valor de la variable, así que utilicé:for(var b in window) { if(window.hasOwnProperty(b)) console.log(b+" = "+window[b]); }
northern-bradley el

75

Cuando se detiene la ejecución del script (por ejemplo, en un punto de interrupción), simplemente puede ver todos los globales en el panel derecho de la ventana Herramientas para desarrolladores:

cromo-globals


2
¿Puedo escupir los vars desde un contexto de ejecución, como un espectáculo de punto de interrupción, sin detenerme?
Mild Fuzz

1
@MildFuzz Luego use la solución de Nick Craver (la aceptada).
Marcel Korpel

62

Abra la consola y luego ingrese:

  • keys(window) ver variables
  • dir(window) ver objetos

dir(Function("return this")())hace que funcione en Web Workers también
Janus Troelsen

2
FYI dir(window)no funciona en Firefox (sí, sé que este hilo era sobre Chrome), pero key(window)funciona en Firefox
Craig London

38

El windowobjeto contiene todas las variables públicas, por lo que puede escribirlo en la consola y luego expandirlo para ver todas las variables / atributos / funciones.

Chrome-show-all-variables-expand-window-object


44
¡Agradable! Con mucho, la forma más fácil ya que puede expandir recursivamente las variables.
qwertzguy

31

Si desea excluir todas las propiedades estándar del objeto de ventana y ver las variables globales específicas de la aplicación, esto las imprimirá en la consola de Chrome:

(function(){var standardGlobals=["top","window","location","external","chrome","document","inlineCSS","target","width","height","canvas","data","DOMURL","img","svg","ctx","url","w","a","speechSynthesis","webkitNotifications","localStorage","sessionStorage","applicationCache","webkitStorageInfo","indexedDB","webkitIndexedDB","crypto","CSS","performance","console","devicePixelRatio","styleMedia","parent","opener","frames","self","defaultstatus","defaultStatus","status","name","length","closed","pageYOffset","pageXOffset","scrollY","scrollX","screenTop","screenLeft","screenY","screenX","innerWidth","innerHeight","outerWidth","outerHeight","offscreenBuffering","frameElement","clientInformation","navigator","toolbar","statusbar","scrollbars","personalbar","menubar","locationbar","history","screen","postMessage","close","blur","focus","ondeviceorientation","ondevicemotion","onunload","onstorage","onresize","onpopstate","onpageshow","onpagehide","ononline","onoffline","onmessage","onhashchange","onbeforeunload","onwaiting","onvolumechange","ontimeupdate","onsuspend","onsubmit","onstalled","onshow","onselect","onseeking","onseeked","onscroll","onreset","onratechange","onprogress","onplaying","onplay","onpause","onmousewheel","onmouseup","onmouseover","onmouseout","onmousemove","onmouseleave","onmouseenter","onmousedown","onloadstart","onloadedmetadata","onloadeddata","onload","onkeyup","onkeypress","onkeydown","oninvalid","oninput","onfocus","onerror","onended","onemptied","ondurationchange","ondrop","ondragstart","ondragover","ondragleave","ondragenter","ondragend","ondrag","ondblclick","oncuechange","oncontextmenu","onclose","onclick","onchange","oncanplaythrough","oncanplay","oncancel","onblur","onabort","onwheel","onwebkittransitionend","onwebkitanimationstart","onwebkitanimationiteration","onwebkitanimationend","ontransitionend","onsearch","getSelection","print","stop","open","showModalDialog","alert","confirm","prompt","find","scrollBy","scrollTo","scroll","moveBy","moveTo","resizeBy","resizeTo","matchMedia","requestAnimationFrame","cancelAnimationFrame","webkitRequestAnimationFrame","webkitCancelAnimationFrame","webkitCancelRequestAnimationFrame","captureEvents","releaseEvents","atob","btoa","setTimeout","clearTimeout","setInterval","clearInterval","TEMPORARY","PERSISTENT","getComputedStyle","getMatchedCSSRules","webkitConvertPointFromPageToNode","webkitConvertPointFromNodeToPage","webkitRequestFileSystem","webkitResolveLocalFileSystemURL","openDatabase","addEventListener","removeEventListener","dispatchEvent"];
    var appSpecificGlobals={};
    for (var w in window){
        if (standardGlobals.indexOf(w)==-1) appSpecificGlobals[w]=window[w];
    }
    console.log(appSpecificGlobals);})()

El guión funciona bien como marcador. Para usar el script como marcador, cree un nuevo marcador y reemplace la URL con lo siguiente:

javascript:(function(){var standardGlobals=["top","window","location","external","chrome","document","inlineCSS","target","width","height","canvas","data","DOMURL","img","svg","ctx","url","w","a","speechSynthesis","webkitNotifications","localStorage","sessionStorage","applicationCache","webkitStorageInfo","indexedDB","webkitIndexedDB","crypto","CSS","performance","console","devicePixelRatio","styleMedia","parent","opener","frames","self","defaultstatus","defaultStatus","status","name","length","closed","pageYOffset","pageXOffset","scrollY","scrollX","screenTop","screenLeft","screenY","screenX","innerWidth","innerHeight","outerWidth","outerHeight","offscreenBuffering","frameElement","clientInformation","navigator","toolbar","statusbar","scrollbars","personalbar","menubar","locationbar","history","screen","postMessage","close","blur","focus","ondeviceorientation","ondevicemotion","onunload","onstorage","onresize","onpopstate","onpageshow","onpagehide","ononline","onoffline","onmessage","onhashchange","onbeforeunload","onwaiting","onvolumechange","ontimeupdate","onsuspend","onsubmit","onstalled","onshow","onselect","onseeking","onseeked","onscroll","onreset","onratechange","onprogress","onplaying","onplay","onpause","onmousewheel","onmouseup","onmouseover","onmouseout","onmousemove","onmouseleave","onmouseenter","onmousedown","onloadstart","onloadedmetadata","onloadeddata","onload","onkeyup","onkeypress","onkeydown","oninvalid","oninput","onfocus","onerror","onended","onemptied","ondurationchange","ondrop","ondragstart","ondragover","ondragleave","ondragenter","ondragend","ondrag","ondblclick","oncuechange","oncontextmenu","onclose","onclick","onchange","oncanplaythrough","oncanplay","oncancel","onblur","onabort","onwheel","onwebkittransitionend","onwebkitanimationstart","onwebkitanimationiteration","onwebkitanimationend","ontransitionend","onsearch","getSelection","print","stop","open","showModalDialog","alert","confirm","prompt","find","scrollBy","scrollTo","scroll","moveBy","moveTo","resizeBy","resizeTo","matchMedia","requestAnimationFrame","cancelAnimationFrame","webkitRequestAnimationFrame","webkitCancelAnimationFrame","webkitCancelRequestAnimationFrame","captureEvents","releaseEvents","atob","btoa","setTimeout","clearTimeout","setInterval","clearInterval","TEMPORARY","PERSISTENT","getComputedStyle","getMatchedCSSRules","webkitConvertPointFromPageToNode","webkitConvertPointFromNodeToPage","webkitRequestFileSystem","webkitResolveLocalFileSystemURL","openDatabase","addEventListener","removeEventListener","dispatchEvent"]; var $appSpecificGlobals={};for (var w in window){if (standardGlobals.indexOf(w)==-1) $appSpecificGlobals[w]=window[w];} window.$appSpecificGlobals=$appSpecificGlobals;console.log(window.$appSpecificGlobals);})()

2
Esta es una lista de los
valores

9

David Walsh tiene una buena solución para esto. Aquí está mi opinión sobre esto, combinando su solución con lo que también se ha descubierto en este hilo.

https://davidwalsh.name/global-variables-javascript

x = {};
var iframe = document.createElement('iframe');
iframe.onload = function() {
    var standardGlobals = Object.keys(iframe.contentWindow);
    for(var b in window) { 
      const prop = window[b];
      if(window.hasOwnProperty(b) && prop && !prop.toString().includes('native code') && !standardGlobals.includes(b)) {
        x[b] = prop;
      }
    }
    console.log(x)
};
iframe.src = 'about:blank';
document.body.appendChild(iframe);

x ahora solo tiene los globales.


1
prop.toStringParece que no existe en todas partes, por lo que la condición podría ser más defensivaif(window.hasOwnProperty(b) && prop && (prop.toString && !prop.toString().includes('native code')) && !standardGlobals.includes(b))
yves amsellem

6

Escriba la siguiente declaración en la consola de JavaScript:

debugger

Ahora puede inspeccionar el alcance global utilizando las herramientas de depuración normales.

Para ser justos, obtendrá todo en el windowalcance, incluidos los navegadores integrados, por lo que podría ser una especie de experiencia de aguja en un pajar. : /


4

Es posible que desee probar esta extensión Firebug lite para Chrome.


3
Aunque se ve bien, esta solución suena un poco como usar un cañón para matarme un mosquito.
Marcel Korpel

Tal vez. Es lo único que encontré que muestra objetos / funciones / etc. como lo hace firebug en FF (debajo de la pestaña DOM en la extensión). Sin embargo, es un poco lento.
KooiInc

1
A partir del 17 de mayo, su enlace está roto. ¿Es esto lo mismo? getfirebug.com/releases/lite/chrome
Ian Hunter

@beanland 7: sí, lo arreglé en la respuesta, gracias por advertencia
KooiInc

4

Para ver cualquier variable en Chrome, vaya a "Fuentes", y luego "Ver" y agréguela. Si agrega la variable "ventana" aquí, puede expandirla y explorar.


4

Método actualizado del mismo artículo mencionado por Avindra: inyecta iframe y compara sus contentWindowpropiedades con las propiedades de la ventana global.

(function() {
  var iframe = document.createElement('iframe');
  iframe.onload = function() {
    var iframeKeys = Object.keys(iframe.contentWindow);
    Object.keys(window).forEach(function(key) {
      if(!(iframeKeys.indexOf(key) > -1)) {
        console.log(key);
      }
    });
  };
  iframe.src = 'about:blank';
  document.body.appendChild(iframe);
})();


2

Tipo: thisen la consola,

para obtener el window objectcreo (?), creo que es básicamente lo mismo que escribir windowen la consola.

Funciona al menos en Firefox y Chrome.


1

Como todas las "variables públicas" son, de hecho, propiedades del objeto de ventana (de la ventana / pestaña que está mirando), puede inspeccionar el objeto de "ventana". Si tiene varios marcos, tendrá que seleccionar el objeto de ventana correcto (como en Firebug) de todos modos.



0

Listar la variable y sus valores.

for(var b in window) { if(window.hasOwnProperty(b)) console.log(b+" = "+window[b]); }

ingrese la descripción de la imagen aquí

Mostrar el valor de un objeto variable particular

console.log(JSON.stringify(content_of_some_variable_object))

ingrese la descripción de la imagen aquí

Fuentes: comentario de @ northern-bradley y respuesta de @ nick-craver


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.