Wyświetl listę wszystkich zmiennych JavaScript w konsoli Google Chrome


236

W Firebug karta DOM pokazuje listę wszystkich publicznych zmiennych i obiektów. W konsoli Chrome musisz wpisać nazwę zmiennej publicznej lub obiektu, który chcesz zbadać.

Czy istnieje sposób - a przynajmniej polecenie - aby konsola Chrome wyświetlała listę wszystkich publicznych zmiennych i obiektów? Zaoszczędzi to dużo pisania.

Odpowiedzi:


330

Czy tego rodzaju wyników szukasz?

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

Spowoduje to wyświetlenie listy wszystkich dostępnych windowobiektów (wszystkie funkcje i zmienne, np. $I jQueryna tej stronie itp.). Chociaż jest to dość lista; nie jestem pewien, jak to jest pomocne ...

W przeciwnym razie po prostu zrób window i zacznij schodzić z drzewa:

window

To da ci obiekt DOMWindowrozwijany / eksplorowalny.


4
@ntownsend -Moja konsola się z tobą nie zgadza :) To własnośćobject , dlaczego by jej nie mieć?
Nick Craver

9
„dlaczego to nie miałoby?” [[Prototype]]Nieruchomość wewnętrzna globalnego obiektu jest zależna od implementacji w prawie wszystkich większych wdrożeń -V8, Spidermonkey, Rhino, itp. globalne dziedziczy sprzeciwić się w pewnym momencie z Object.prototype, ale na przykład w innych implementacjach -JScript, besen, dmdscript, etc. ..- window.hasOwnPropertynie istnieje , więc nie istnieje, aby to przetestować, możemy:Object.prototype.isPrototypeOf(window);
CMS

10
@CMS - Tak, to prawda ... ale pytanie dotyczy konkretnie Chrome, więc implementacja jest znana.
Nick Craver

6
Lub możesz po prostu wpisać to;
Eddie B,

2
Chciałem również zobaczyć wartość zmiennej, więc użyłem:for(var b in window) { if(window.hasOwnProperty(b)) console.log(b+" = "+window[b]); }
Northern-Bradley,

75

Gdy wykonywanie skryptu jest zatrzymane (np. W punkcie przerwania), możesz po prostu wyświetlić wszystkie globale w prawym panelu okna Narzędzi programisty:

chrom-globale


2
czy mogę wypluć zmienne z kontekstu wykonania, jak pokaz punktu przerwania, bez zatrzymywania się?
Łagodny Fuzz,

1
@MildFuzz Następnie skorzystaj z rozwiązania Nicka Cravera (zaakceptowanego).
Marcel Korpel

61

Otwórz konsolę, a następnie wprowadź:

  • keys(window) aby zobaczyć zmienne
  • dir(window) widzieć przedmioty

dir(Function("return this")())sprawia, że ​​działa również w Web Workers
Janus Troelsen

2
FYI dir(window)nie działa w przeglądarce Firefox (tak, wiem, że ten wątek dotyczy Chrome), ale key(window)działa w przeglądarce Firefox
Craig London

38

windowObiekt zawiera wszystkie zmienne publiczne, więc można go wpisać w konsoli, a następnie rozwinąć, aby wyświetlić wszystkie zmienne / cechy / funkcje.

chrome-pokaż-wszystkie-zmienne-rozwiń-okno-obiekt


4
Miły! Zdecydowanie najłatwiejszy sposób, ponieważ można rekurencyjnie rozszerzać zmienne.
qwertzguy

31

Jeśli chcesz wykluczyć wszystkie standardowe właściwości obiektu okna i wyświetlić globały specyficzne dla aplikacji, spowoduje to wydrukowanie ich na konsoli 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);})()

Skrypt działa dobrze jako bookmarklet. Aby użyć skryptu jako bookmarkletu, utwórz nową zakładkę i zastąp adres URL następującym:

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
To jest lista bieżących domyślnych
globałów

9

David Walsh ma na to dobre rozwiązanie. Oto moje zdanie na ten temat, łącząc jego rozwiązanie z tym, co zostało odkryte w tym wątku.

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 teraz ma tylko globały.


1
prop.toStringwydaje się, że nie wszędzie istnieje, więc warunek może być bardziej defensywnyif(window.hasOwnProperty(b) && prop && (prop.toString && !prop.toString().includes('native code')) && !standardGlobals.includes(b))
yves amsellem

6

Wpisz następującą instrukcję w konsoli javascript:

debugger

Teraz możesz sprawdzić zasięg globalny za pomocą zwykłych narzędzi do debugowania.

Szczerze mówiąc, dostaniesz wszystko w windowzasięgu, w tym wbudowane przeglądarki, więc może to być coś w rodzaju igły w stogu siana. : /


4

Możesz wypróbować to rozszerzenie Firebug Lite dla Chrome.


3
Chociaż wygląda to ładnie, to rozwiązanie brzmi trochę jak użycie armaty do zabicia komara.
Marcel Korpel

Może. To jedyna rzecz, którą znalazłem, która pokazuje obiekty / funkcje / itp. tak jak Firebug w FF (pod zakładką DOM w rozszerzeniu). Jest to jednak trochę powolne.
KooiInc

1
Od 17 maja Twój link jest zepsuty. Czy to to samo? getfirebug.com/releases/lite/chrome
Ian Hunter

@beanland 7: tak, naprawiłem to w odpowiedzi, dziękuję za ostrzeżenie
KooiInc

4

Aby wyświetlić dowolną zmienną w chrome, przejdź do „Źródła”, a następnie „Obejrzyj” i dodaj ją. Jeśli dodasz tutaj zmienną „window”, możesz ją rozwinąć i eksplorować.


4

Zaktualizowana metoda z tego samego artykułu, o którym wspominał Avindra - wstrzykuje ramkę iframe i porównuje jej contentWindowwłaściwości z globalnymi właściwościami okna.

(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

Wpisz: thisw konsoli

aby uzyskać window objectmyślę (?), myślę, że jest to w zasadzie to samo, co pisanie windoww konsoli.

Działa przynajmniej w Firefox i Chrome.


1

Ponieważ wszystkie „zmienne publiczne” są w rzeczywistości właściwościami obiektu okna (okna / karty, na którą patrzysz), możesz po prostu sprawdzić obiekt „okna”. Jeśli masz wiele ramek, i tak musisz wybrać odpowiedni obiekt okna (jak w Firebug).



0

Wymień zmienną i ich wartości

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

wprowadź opis zdjęcia tutaj

Wyświetl wartość określonego obiektu zmiennej

console.log(JSON.stringify(content_of_some_variable_object))

wprowadź opis zdjęcia tutaj

Źródła: komentarz od @ northern-bradley i odpowiedź od @ nick-craver


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.