Liste aller JavaScript-Variablen in der Google Chrome Console anzeigen

236

In Firebug wird auf der Registerkarte DOM eine Liste aller Ihrer öffentlichen Variablen und Objekte angezeigt. In der Chrome-Konsole müssen Sie den Namen der öffentlichen Variablen oder des öffentlichen Objekts eingeben, die Sie untersuchen möchten.

Gibt es eine Möglichkeit - oder zumindest einen Befehl - für die Chrome-Konsole, eine Liste aller öffentlichen Variablen und Objekte anzuzeigen? Das spart viel Tipparbeit.

GRboss
quelle

Antworten:

330

Ist dies die Art von Ausgabe, nach der Sie suchen?

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

Dadurch wird alles aufgelistet, was auf dem windowObjekt verfügbar ist (alle Funktionen und Variablen, z. B. $und jQueryauf dieser Seite usw.). Dies ist jedoch eine ziemliche Liste; Ich bin mir nicht sicher, wie hilfreich es ist ...

Ansonsten mach es einfach windowund fang an, seinen Baum hinunterzugehen:

window

Dies gibt Ihnen DOMWindowein erweiterbares / erforschbares Objekt.

Nick Craver
quelle
4
@ntownsend - Meine Konsole stimmt nicht mit Ihnen überein :) Es ist eine Eigenschaft vonobject , warum sollte sie es nicht haben?
Nick Craver
9
"warum sollte es es nicht haben?" Die [[Prototype]]interne Eigenschaft des globalen Objekts ist implementierungsabhängig . In fast allen wichtigen Implementierungen - V8, Spidermonkey, Rhino usw. - erbt das globale Objekt irgendwann von Object.prototype, aber beispielsweise in anderen Implementierungen - JScript, BESEN, DMDScript usw. ..- es existiert nicht, also window.hasOwnPropertyexistiert es nicht, um es zu testen, können wir:Object.prototype.isPrototypeOf(window);
CMS
10
@CMS - Ja, das stimmt ... aber die Frage bezieht sich speziell auf Chrome, sodass die Implementierung bekannt ist.
Nick Craver
6
Oder Sie können dies einfach eingeben.
Eddie B
2
Ich wollte auch den Wert der Variablen sehen, also benutzte ich:for(var b in window) { if(window.hasOwnProperty(b)) console.log(b+" = "+window[b]); }
Northern Bradley
75

Wenn die Skriptausführung angehalten wird (z. B. an einem Haltepunkt), können Sie einfach alle globalen Elemente im rechten Bereich des Fensters "Entwicklertools" anzeigen:

Chrom-Globals

Marcel Korpel
quelle
2
Kann ich die Vars aus einem Ausführungskontext wie einer Haltepunktshow ausspucken, ohne anzuhalten?
Mild Fuzz
1
@MildFuzz Verwenden Sie dann die Lösung von Nick Craver (die akzeptierte).
Marcel Korpel
61

Öffnen Sie die Konsole und geben Sie Folgendes ein:

  • keys(window) Variablen sehen
  • dir(window) Objekte sehen
Arkadiusm
quelle
dir(Function("return this")())macht es auch in Web Workers funktionieren
Janus Troelsen
2
Zu Ihrer Information dir(window)funktioniert nicht in Firefox (ja, ich weiß, in diesem Thread ging es um Chrome), aber key(window)es funktioniert in Firefox
Craig London
38

Das windowObjekt enthält alle öffentlichen Variablen, sodass Sie es in die Konsole eingeben und dann erweitern können, um alle Variablen / Attribute / Funktionen anzuzeigen.

Chrome-Show-All-Variablen-Erweitern-Fenster-Objekt

Fabien Ménager
quelle
4
Nett! Bei weitem der einfachste Weg, da Sie Variablen rekursiv erweitern können.
Qwertzguy
31

Wenn Sie alle Standardeigenschaften des Fensterobjekts ausschließen und anwendungsspezifische Globals anzeigen möchten, werden diese auf der Chrome-Konsole gedruckt:

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

Das Skript funktioniert gut als Lesezeichen. Um das Skript als Lesezeichen zu verwenden, erstellen Sie ein neues Lesezeichen und ersetzen Sie die URL durch die folgende:

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);})()
Max Heiber
quelle
2
Dies ist eine Liste der aktuellen Chrome und Firefox Standard Globals: pastebin.com/wNj3kfg0
redaxmedia
9

David Walsh hat dafür eine gute Lösung. Hier ist meine Meinung dazu, indem ich seine Lösung mit dem kombiniere, was auch in diesem Thread entdeckt wurde.

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 Jetzt hat nur noch die Globalen.

Avindra Goolcharan
quelle
1
prop.toStringscheint nicht überall zu existieren, daher könnte der Zustand defensiver seinif(window.hasOwnProperty(b) && prop && (prop.toString && !prop.toString().includes('native code')) && !standardGlobals.includes(b))
yves amsellem
6

Geben Sie die folgende Anweisung in die Javascript-Konsole ein:

debugger

Jetzt können Sie den globalen Bereich mit den normalen Debug-Tools überprüfen.

Um fair zu sein, Sie erhalten alles im windowUmfang, einschließlich integrierter Browser, so dass es sich möglicherweise um eine Art Nadel-im-Heuhaufen-Erlebnis handelt. : /

Tangentensturm
quelle
4

Möglicherweise möchten Sie diese Firebug Lite- Erweiterung für Chrome ausprobieren .

KooiInc
quelle
3
Obwohl es gut aussieht, klingt diese Lösung für mich ein bisschen nach einer Kanone, um eine Mücke zu töten.
Marcel Korpel
Vielleicht. Es ist das einzige, was ich gefunden habe, das Objekte / Funktionen / etc. Zeigt. So wie es Firebug in FF tut (unter der Registerkarte DOM in der Erweiterung). Es ist allerdings etwas langsam.
KooiInc
1
Ab dem 17. Mai ist Ihre Verbindung unterbrochen. Ist das das gleiche? getfirebug.com/releases/lite/chrome
Ian Hunter
@ Beanland 7: Ja, behoben in der Antwort, danke für die Warnung
KooiInc
4

Um eine Variable in Chrome anzuzeigen, gehen Sie zu "Quellen" und dann zu "Beobachten" und fügen Sie sie hinzu. Wenn Sie hier die Variable "Fenster" hinzufügen, können Sie sie erweitern und erkunden.

TigerBear
quelle
4

Aktualisierte Methode aus demselben Artikel, den Avindra erwähnt hat - fügt iframe ein und vergleicht seine contentWindowEigenschaften mit den Eigenschaften globaler Fenster.

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

James Morgan
quelle
2

Geben Sie Folgendes ein: thisin die Konsole,

Um das zu bekommen, window objectdenke ich (?), denke ich, dass es im Grunde dasselbe ist wie das Eingeben windowin die Konsole.

Es funktioniert zumindest in Firefox & Chrome.

Sebastian Norr
quelle
1

Da alle "öffentlichen Variablen" tatsächlich Eigenschaften des Fensterobjekts (des Fensters / der Registerkarte, die Sie betrachten) sind, können Sie stattdessen nur das "Fenster" -Objekt überprüfen. Wenn Sie mehrere Frames haben, müssen Sie trotzdem das richtige Fensterobjekt auswählen (wie in Firebug).

mihi
quelle
1

Versuchen Sie diesen einfachen Befehl:

console.log (Fenster)
Vaclav Müller
quelle
Es gibt "undefiniert" zurück
Shayan
0

Listen Sie die Variable und ihre Werte auf

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

Geben Sie hier die Bildbeschreibung ein

Zeigen Sie den Wert eines bestimmten variablen Objekts an

console.log(JSON.stringify(content_of_some_variable_object))

Geben Sie hier die Bildbeschreibung ein

Quellen: Kommentar von @ Northern-Bradley und Antwort von @ Nick-Craver

Intika
quelle