查看谷歌Chrome控制台中所有JavaScript变量的列表

在Firebug中,DOM选项卡显示了所有公共变量和对象的列表。在Chrome的控制台中,你必须输入你想要浏览的公共变量或对象的名称。

有没有一种方法——或者至少是一个命令——让Chrome的控制台显示所有公共变量和对象的列表?这将节省大量的打字。

544376 次浏览

window对象包含所有公共变量,因此您可以在控制台中键入它,然后展开以查看所有变量/属性/函数。

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

因为所有的“公共变量”实际上都是窗口对象(你正在查看的窗口/选项卡)的属性,你可以只检查“窗口”对象。如果你有多个帧,你将不得不选择正确的窗口对象(就像在Firebug中)。

这就是你想要的输出吗?

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

这将列出window对象上的所有可用内容(所有函数和变量,例如,本页上的$jQuery等)。虽然,这是一个相当长的列表;不知道它有多大帮助…

否则,只需执行window并开始向下查找它的树:

window

这将给你DOMWindow,一个可扩展/可探索的对象。

你可能想尝试这个Firebug lite扩展Chrome。

当脚本执行暂停时(例如,在一个断点上),你可以简单地在开发人员工具窗口的右侧窗格中查看所有全局变量:

chrome-globals

打开控制台,然后输入:

  • keys(window)来查看变量
  • dir(window)来查看对象

如果你想排除窗口对象的所有标准属性,并查看特定于应用程序的全局变量,这将把它们打印到Chrome控制台:

{


const standardGlobals = new Set(["window", "self", "document", "name", "location", "customElements", "history", "locationbar", "menubar", "personalbar", "scrollbars", "statusbar", "toolbar", "status", "closed", "frames", "length", "top", "opener", "parent", "frameElement", "navigator", "origin", "external", "screen", "innerWidth", "innerHeight", "scrollX", "pageXOffset", "scrollY", "pageYOffset", "visualViewport", "screenX", "screenY", "outerWidth", "outerHeight", "devicePixelRatio", "clientInformation", "screenLeft", "screenTop", "defaultStatus", "defaultstatus", "styleMedia", "onsearch", "isSecureContext", "performance", "onappinstalled", "onbeforeinstallprompt", "crypto", "indexedDB", "webkitStorageInfo", "sessionStorage", "localStorage", "onabort", "onblur", "oncancel", "oncanplay", "oncanplaythrough", "onchange", "onclick", "onclose", "oncontextmenu", "oncuechange", "ondblclick", "ondrag", "ondragend", "ondragenter", "ondragleave", "ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "onerror", "onfocus", "onformdata", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onload", "onloadeddata", "onloadedmetadata", "onloadstart", "onmousedown", "onmouseenter", "onmouseleave", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onmousewheel", "onpause", "onplay", "onplaying", "onprogress", "onratechange", "onreset", "onresize", "onscroll", "onseeked", "onseeking", "onselect", "onstalled", "onsubmit", "onsuspend", "ontimeupdate", "ontoggle", "onvolumechange", "onwaiting", "onwebkitanimationend", "onwebkitanimationiteration", "onwebkitanimationstart", "onwebkittransitionend", "onwheel", "onauxclick", "ongotpointercapture", "onlostpointercapture", "onpointerdown", "onpointermove", "onpointerup", "onpointercancel", "onpointerover", "onpointerout", "onpointerenter", "onpointerleave", "onselectstart", "onselectionchange", "onanimationend", "onanimationiteration", "onanimationstart", "ontransitionrun", "ontransitionstart", "ontransitionend", "ontransitioncancel", "onafterprint", "onbeforeprint", "onbeforeunload", "onhashchange", "onlanguagechange", "onmessage", "onmessageerror", "onoffline", "ononline", "onpagehide", "onpageshow", "onpopstate", "onrejectionhandled", "onstorage", "onunhandledrejection", "onunload", "alert", "atob", "blur", "btoa", "cancelAnimationFrame", "cancelIdleCallback", "captureEvents", "clearInterval", "clearTimeout", "close", "confirm", "
;createImageBitmap", "fetch", "find", "focus", "getComputedStyle", "getSelection", "matchMedia", "moveBy", "moveTo", "open", "postMessage", "print", "prompt", "queueMicrotask", "releaseEvents", "requestAnimationFrame", "requestIdleCallback", "resizeBy", "resizeTo", "scroll", "scrollBy", "scrollTo", "setInterval", "setTimeout", "stop", "webkitCancelAnimationFrame", "webkitRequestAnimationFrame", "chrome", "caches", "ondevicemotion", "ondeviceorientation", "ondeviceorientationabsolute", "originAgentCluster", "cookieStore", "showDirectoryPicker", "showOpenFilePicker", "showSaveFilePicker", "speechSynthesis", "onpointerrawupdate", "trustedTypes", "crossOriginIsolated", "openDatabase", "webkitRequestFileSystem", "webkitResolveLocalFileSystemURL"]);


for (const key of Object.keys(window)) {
if (!standardGlobals.has(key)) {
console.log(key)
}
}
}

该脚本作为书签运行良好。要使用脚本作为书签,请创建一个新书签,并将URL替换为以下内容:

javascript:(() => {
const standardGlobals = new Set(["window", "self", "document", "name", "location", "customElements", "history", "locationbar", "menubar", "personalbar", "scrollbars", "statusbar", "toolbar", "status", "closed", "frames", "length", "top", "opener", "parent", "frameElement", "navigator", "origin", "external", "screen", "innerWidth", "innerHeight", "scrollX", "pageXOffset", "scrollY", "pageYOffset", "visualViewport", "screenX", "screenY", "outerWidth", "outerHeight", "devicePixelRatio", "clientInformation", "screenLeft", "screenTop", "defaultStatus", "defaultstatus", "styleMedia", "onsearch", "isSecureContext", "performance", "onappinstalled", "onbeforeinstallprompt", "crypto", "indexedDB", "webkitStorageInfo", "sessionStorage", "localStorage", "onabort", "onblur", "oncancel", "oncanplay", "oncanplaythrough", "onchange", "onclick", "onclose", "oncontextmenu", "oncuechange", "ondblclick", "ondrag", "ondragend", "ondragenter", "ondragleave", "ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "onerror", "onfocus", "onformdata", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onload", "onloadeddata", "onloadedmetadata", "onloadstart", "onmousedown", "onmouseenter", "onmouseleave", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onmousewheel", "onpause", "onplay", "onplaying", "onprogress", "onratechange", "onreset", "onresize", "onscroll", "onseeked", "onseeking", "onselect", "onstalled", "onsubmit", "onsuspend", "ontimeupdate", "ontoggle", "onvolumechange", "onwaiting", "onwebkitanimationend", "onwebkitanimationiteration", "onwebkitanimationstart", "onwebkittransitionend", "onwheel", "onauxclick", "ongotpointercapture", "onlostpointercapture", "onpointerdown", "onpointermove", "onpointerup", "onpointercancel", "onpointerover", "onpointerout", "onpointerenter", "onpointerleave", "onselectstart", "onselectionchange", "onanimationend", "onanimationiteration", "onanimationstart", "ontransitionrun", "ontransitionstart", "ontransitionend", "ontransitioncancel", "onafterprint", "onbeforeprint", "onbeforeunload", "onhashchange", "onlanguagechange", "onmessage", "onmessageerror", "onoffline", "ononline", "onpagehide", "onpageshow", "onpopstate", "onrejectionhandled", "onstorage", "onunhandledrejection", "onunload", "alert", "atob", "blur", "btoa", "cancelAnimationFrame", "cancelIdleCallback", "captureEvents", "clearInterval", "clearTimeout", "close", "confirm", "
;createImageBitmap", "fetch", "find", "focus", "getComputedStyle", "getSelection", "matchMedia", "moveBy", "moveTo", "open", "postMessage", "print", "prompt", "queueMicrotask", "releaseEvents", "requestAnimationFrame", "requestIdleCallback", "resizeBy", "resizeTo", "scroll", "scrollBy", "scrollTo", "setInterval", "setTimeout", "stop", "webkitCancelAnimationFrame", "webkitRequestAnimationFrame", "chrome", "caches", "ondevicemotion", "ondeviceorientation", "ondeviceorientationabsolute", "originAgentCluster", "cookieStore", "showDirectoryPicker", "showOpenFilePicker", "showSaveFilePicker", "speechSynthesis", "onpointerrawupdate", "trustedTypes", "crossOriginIsolated", "openDatabase", "webkitRequestFileSystem", "webkitResolveLocalFileSystemURL"]);
for (const key of Object.keys(window)) {
if (!standardGlobals.has(key)) {
console.log(key)
}
}
})()

对此,大卫·沃尔什有一个很好的解决方案。以下是我对这个问题的看法,结合了他的解决方案和在这个帖子中发现的东西。

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现在只有全局变量。

要查看chrome中的任何变量,请转到“来源”,然后“观看”并添加它。如果你在这里添加“window”变量,那么你可以展开它并进行探索。

更新方法从相同的文章 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);
})();

在javascript控制台中输入以下语句:

debugger

现在可以使用正常的调试工具检查全局作用域。

公平地说,你将在window范围内获得一切,包括浏览器内置,所以这可能是一种大海捞针的体验。:/

试试这个简单的命令:

console.log(window)

类型:this在控制台中,

要获得window object I think(?),我认为这基本上与在控制台中键入window相同。

它至少在Firefox &铬。

列出变量及其值

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

enter image description here

显示特定变量对象的值

console.log(JSON.stringify(content_of_some_variable_object))

enter image description here

来源:来自@north -bradley的评论和来自@nick- cravver的回答

我停止使用这个来调试:

for (aProperty in window) {
try{
console.log(aProperty +':'+JSON.stringify(window[aProperty]));
}catch{}
}

try用于避免TypeError: Converting circular structure to JSON
然后Save as...控制台输出到一个文件并进一步操作