Veja a lista de todas as variáveis ​​JavaScript no Google Chrome Console


237

No Firebug, a guia DOM mostra uma lista de todas as suas variáveis ​​e objetos públicos. No console do Chrome, você deve digitar o nome da variável ou objeto público que deseja explorar.

Existe uma maneira - ou pelo menos um comando - para o console do Chrome exibir uma lista de todas as variáveis ​​e objetos públicos? Isso economizará muita digitação.

Respostas:


330

Esse é o tipo de saída que você está procurando?

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

Isso listará tudo o que está disponível no windowobjeto (todas as funções e variáveis, por exemplo, $e jQuerynesta página, etc.). Porém, esta é uma lista e tanto; não sei como é útil ...

Caso contrário, basta fazer windowe começar a descer em sua árvore:

window

Isso fornecerá DOMWindowum objeto expansível / explorável.


4
@ntownsend -Meu console discorda de você :) É uma propriedade deobject , por que não a teria?
Nick Craver

9
"por que não teria?" A [[Prototype]]propriedade interna do objeto global depende da implementação ; em quase todas as principais implementações - V8, Spidermonkey, Rhino, etc -, o objeto global herda em algum momento Object.prototype, mas, por exemplo, em outras implementações - JScript, BESEN, DMDScript, etc. ..- não existe, por window.hasOwnPropertyisso não existe, para testá-lo, podemos:Object.prototype.isPrototypeOf(window);
CMS

10
@ CM - Sim, isso é verdade ... mas a pergunta é especificamente sobre o Chrome, então a implementação é conhecida.
Nick Craver

6
Ou você pode simplesmente digitar isso;
Eddie B

2
Eu queria ver o valor da variável, bem assim que eu usei:for(var b in window) { if(window.hasOwnProperty(b)) console.log(b+" = "+window[b]); }
norte-Bradley

75

Quando a execução do script é interrompida (por exemplo, em um ponto de interrupção), você pode simplesmente visualizar todas as globais no painel direito da janela Ferramentas do desenvolvedor:

globos cromados


2
posso cuspir os vars de um contexto de execução, como um show de ponto de interrupção, sem parar?
Mild Fuzz

1
@MildFuzz Em seguida, use a solução de Nick Craver (a aceita).
Marcel Korpel

62

Abra o console e digite:

  • keys(window) ver variáveis
  • dir(window) ver objetos

dir(Function("return this")())também funciona em Web Workers
Janus Troelsen

2
FYI dir(window)não funciona no Firefox (sim eu sei que esta discussão foi sobre o Chrome), mas key(window)funciona no Firefox
Craig Londres

38

O windowobjeto contém todas as variáveis ​​públicas, para que você possa digitá-lo no console e expandir para visualizar todas as variáveis ​​/ atributos / funções.

chrome-show-all-variable-expand-window-object


4
Agradável! De longe, a maneira mais fácil, pois você pode expandir recursivamente variáveis.
Qwertzguy

31

Se você deseja excluir todas as propriedades padrão do objeto window e visualizar os globais específicos do aplicativo, eles serão impressos no console do 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);})()

O script funciona bem como um bookmarklet. Para usar o script como um bookmarklet, crie um novo favorito e substitua o URL pelo seguinte:

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 é uma lista dos globais globais padrão do Chrome e Firefox: pastebin.com/wNj3kfg0
redaxmedia

9

David Walsh tem uma boa solução para isso. Aqui está minha opinião sobre isso, combinando sua solução com o que foi descoberto nesse segmento também.

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 agora tem apenas os globais.


1
prop.toStringparece não existir em todos os lugares, por isso, a condição poderia ser mais defensivaif(window.hasOwnProperty(b) && prop && (prop.toString && !prop.toString().includes('native code')) && !standardGlobals.includes(b))
Yves Amsellem

6

Digite a seguinte instrução no console javascript:

debugger

Agora você pode inspecionar o escopo global usando as ferramentas de depuração normais.

Para ser justo, você terá tudo no windowescopo, incluindo os embutidos no navegador; portanto, pode ser uma espécie de experiência do tipo "agulha no palheiro". : /


4

Você pode tentar esta extensão do Firebug Lite para Chrome.


3
Embora pareça bom, essa solução parece um pouco de usar um canhão para matar um mosquito para mim.
Marcel Korpel

Talvez. É a única coisa que encontrei que mostra objetos / funções / etc. da mesma forma que o firebug no FF (na guia DOM da extensão). É um pouco lento embora.
KooiInc

1
A partir de 17 de maio, seu link está quebrado. Isso é o mesmo? getfirebug.com/releases/lite/chrome
Ian Hunter

@beanland 7: sim, fixa-lo na resposta, thnx para aviso
KooiInc

4

Para visualizar qualquer variável no chrome, vá para "Fontes", depois "Assista" e adicione-a. Se você adicionar a variável "window" aqui, poderá expandi-la e explorar.


4

Método atualizado do mesmo artigo mencionado pela Avindra - injeta iframe e compara suas contentWindowpropriedades às propriedades da janela 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

Digite: thisno console,

para obter o window objectque penso (?), acho que é basicamente o mesmo que digitar windowno console.

Funciona pelo menos no Firefox e chrome.


1

Como todas as "variáveis ​​públicas" são de fato propriedades do objeto window (da janela / guia que você está vendo), você pode apenas inspecionar o objeto "window". Se você tiver vários quadros, terá que selecionar o objeto de janela correto (como no Firebug) de qualquer maneira.



0

Listar a variável e seus valores

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

insira a descrição da imagem aqui

Exibir o valor de um objeto variável específico

console.log(JSON.stringify(content_of_some_variable_object))

insira a descrição da imagem aqui

Fontes: comentário de @ northern-bradley e resposta de @ nick-craver


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.