Visualizza l'elenco di tutte le variabili JavaScript in Google Chrome Console

In Firebug, la scheda DOM mostra un elenco di tutte le variabili e gli oggetti pubblici. Nella console di Chrome devi digitare il nome della variabile pubblica o dell'oggetto che desideri esplorare.

C'è un modo - o almeno un comando - per la console di Chrome di visualizzare un elenco di tutte le variabili e gli oggetti pubblici? Salverà molta digitazione.

È questo il tipo di output che stai cercando?

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

Questo elencherà tutto ciò che è disponibile windowsull'oggetto (tutte le funzioni e le variabili, ad esempio, $e jQueryin questa pagina, ecc.). Tuttavia, questo è piuttosto un elenco; non sono sicuro di quanto sia utile ...

Altrimenti fai semplicemente windowe inizia a scendere dal suo albero:

window

Questo ti darà DOMWindowun oggetto espandibile / esplorabile.

Quando l'esecuzione dello script viene interrotta (ad esempio, su un punto di interruzione) è possibile visualizzare semplicemente tutti i globi nel riquadro destro della finestra Strumenti di sviluppo:

Apri la console e inserisci:

• keys(window) per vedere le variabili
• dir(window) per vedere gli oggetti

L' windowoggetto contiene tutte le variabili pubbliche, quindi puoi scriverlo nella console e quindi espanderlo per visualizzare tutte le variabili / attributi / funzioni.

Se desideri escludere tutte le proprietà standard dell'oggetto finestra e visualizzare i globi specifici dell'applicazione, questo li stamperà sulla console di 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);})()

Lo script funziona bene come bookmarklet. Per utilizzare lo script come bookmarklet, creare un nuovo segnalibro e sostituire l'URL con il seguente:

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

David Walsh ha una buona soluzione per questo. Ecco la mia opinione su questo, combinando la sua soluzione con ciò che è stato scoperto anche su questo thread.

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 ora ha solo i globi.

Digita la seguente istruzione nella console javascript:

debugger

Ora puoi controllare l'ambito globale usando i normali strumenti di debug.

Per essere onesti, si otterrà tutto ciò che nel windowcampo di applicazione, compreso il browser built-in, quindi potrebbe essere una sorta di esperienza ago-in-a-pagliaio. : /

Potresti provare questa estensione Firebug Lite per Chrome.

Per visualizzare qualsiasi variabile in Chrome, vai su "Sorgenti", quindi su "Guarda" e aggiungilo. Se aggiungi qui la variabile "finestra", puoi espanderla ed esplorare.

Metodo aggiornato dallo stesso articolo menzionato da Avindra: inietta iframe e confronta le sue contentWindowproprietà con le proprietà globali della finestra.

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

Digitare: thisnella console,

per ottenere il window objectpenso (?), penso che sia sostanzialmente lo stesso che digitare windowla console.

Funziona almeno in Firefox e Chrome.

Dato che tutte le "variabili pubbliche" sono in realtà proprietà dell'oggetto finestra (della finestra / scheda che stai guardando), puoi semplicemente ispezionare l'oggetto "finestra". Se hai più frame, dovrai comunque selezionare l'oggetto finestra corretto (come in Firebug).

Prova questo semplice comando:

console.log (finestra)

Elencare la variabile e i loro valori

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

Visualizza il valore di un particolare oggetto variabile

console.log(JSON.stringify(content_of_some_variable_object))

Fonti: commento di @ northern-bradley e risposta di @ nick-craver