Просмотр списка всех переменных JavaScript в консоли Google Chrome

237

В Firebug вкладка DOM показывает список всех ваших открытых переменных и объектов. В консоли Chrome вы должны ввести имя публичной переменной или объекта, который вы хотите исследовать.

Есть ли способ - или хотя бы команда - для консоли Chrome отобразить список всех открытых переменных и объектов? Это сэкономит много печатать.

GRboss
источник

Ответы:

330

Это то, что вы ищете?

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

Это перечислит все доступное на windowобъекте (все функции и переменные, например, $и jQueryна этой странице, и т. Д.). Хотя это довольно большой список; не уверен, насколько это полезно ...

В противном случае просто сделайте windowи начните спускаться по его дереву:

window

Это даст вам DOMWindow, расширяемый / исследуемый объект.

Ник Крейвер
источник
4
@ntownsend -Моя консоль с тобой не согласна :) Это свойствоobject , почему бы его не иметь?
Ник Крейвер
9
"почему бы это не иметь?" [[Prototype]]Внутреннее свойство глобального объекта зависит от реализации , почти во всех основных реализаций -V8, SpiderMonkey, Rhino, etc-, глобальный объект наследует в какой - то момент из Object.prototype, но, например , в других вариантах реализации -JScript, Besen, DMDScript, и т.д. ..- это не так window.hasOwnProperty, не существует, чтобы проверить это, мы можем:Object.prototype.isPrototypeOf(window);
CMS
10
@CMS - Да, это правда ... но вопрос конкретно о Chrome, поэтому реализация известна.
Ник Крейвер
6
Или вы можете просто напечатать это;
Эдди Б.
2
Я хотел увидеть значение переменной, поэтому я использовал:for(var b in window) { if(window.hasOwnProperty(b)) console.log(b+" = "+window[b]); }
Northern-Bradley
75

Когда выполнение сценария остановлено (например, в точке останова), вы можете просто просмотреть все глобальные переменные в правой панели окна инструментов разработчика:

хром-Глобал

Марсель Корпель
источник
2
Могу ли я выплевывать переменные из контекста выполнения, например, показа точки останова, без остановки?
Мягкий пух
1
@MildFuzz Тогда используйте решение Ника Крейвера (принятое).
Марсель Корпель
62

Откройте консоль и введите:

  • keys(window) видеть переменные
  • dir(window) видеть объекты
arkadiusm
источник
dir(Function("return this")())заставляет его работать и в Web Workers
Янус Троелсен
2
FYI dir(window)не работает в Firefox (да, я знаю, что эта тема была о Chrome), но key(window)работает в Firefox
Крейг Лондон
38

windowОбъект содержит все общие переменные, так что вы можете ввести его в консоли , а затем развернуть , чтобы просмотреть все переменные / атрибуты / функции.

хром-шоу-все-переменное-расширение окна-объект

Фабьен Менагер
источник
4
Ницца! Безусловно, самый простой способ, поскольку вы можете рекурсивно расширять переменные.
qwertzguy
31

Если вы хотите исключить все стандартные свойства объекта окна и просмотреть глобалы, относящиеся к конкретному приложению, они будут напечатаны в консоли 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);})()

Сценарий хорошо работает как букмарклет. Чтобы использовать скрипт в качестве букмарклета, создайте новую закладку и замените URL следующим:

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
Это список текущих глобальных
файлов
9

У Дэвида Уолша есть хорошее решение для этого. Вот мое мнение об этом, объединяющее его решение с тем, что также было обнаружено в этой теме.

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 теперь есть только глобалы.

Авиндра Гольчаран
источник
1
prop.toStringкажется, не существует повсеместно, поэтому условия могут быть более оборонительнымиif(window.hasOwnProperty(b) && prop && (prop.toString && !prop.toString().includes('native code')) && !standardGlobals.includes(b))
Ив Амселлем
6

Введите следующую инструкцию в консоли javascript:

debugger

Теперь вы можете проверить глобальную область видимости, используя обычные средства отладки.

Чтобы быть справедливым, вы получите все в поле windowзрения, включая встроенные браузеры, так что это может быть своего рода иголкой в ​​стоге сена. : /

tangentstorm
источник
4

Вы можете попробовать это расширение Firebug Lite для Chrome.

KooiInc
источник
3
Хотя это выглядит красиво, это решение звучит как использование пушки, чтобы убить комара для меня.
Марсель Корпель
Может быть. Это единственное, что я нашел, что показывает объекты / функции / и т.д. как это делает firebug в FF (под вкладкой DOM в расширении). Это немного медленно, хотя.
KooiInc
1
По состоянию на 17 мая ваша ссылка не работает. Это то же самое? getfirebug.com/releases/lite/chrome
Ян Хантер
@beanland 7: да, исправил это в ответе, спасибо за предупреждение
KooiInc
4

Чтобы просмотреть любую переменную в Chrome, перейдите в «Источники», а затем «Смотреть» и добавьте ее. Если вы добавите сюда переменную «window», то сможете развернуть ее и изучить.

TigerBear
источник
4

Обновленный метод из той же статьи, о которой говорила Avindra - внедряет iframe и сравнивает его contentWindowсвойства с глобальными свойствами окна.

(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

Типа: thisв консоли,

чтобы получить, window objectя думаю (?), я думаю, что это в основном то же, что печатать windowв консоли.

Это работает по крайней мере в Firefox и Chrome.

Себастьян Норр
источник
1

Поскольку все «публичные переменные» на самом деле являются свойствами объекта окна (окна / вкладки, которые вы просматриваете), вы можете просто проверить объект «окна». Если у вас есть несколько кадров, вам все равно придется выбрать правильный объект окна (как в Firebug).

Михи
источник
1

Попробуйте эту простую команду:

console.log (окно)
Вацлав Мюллер
источник
Она возвращает «неопределенный»
Шаян
0

Перечислите переменную и ее значения

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

введите описание изображения здесь

Показать значение определенного объекта переменной

console.log(JSON.stringify(content_of_some_variable_object))

введите описание изображения здесь

Источники: комментарий от @ Northern-Bradley и ответ от @ Nick-Craver

intika
источник