列出网站使用的所有js全局variables(并非全部定义!)
列出网站使用的所有全局variables的方法是什么? 任何浏览器的JavaScriptdebugging器可以做到这一点? 通过使用我的意思是读取,不改变/添加。 检测iframe的,也不错。
请注意:我需要得到一个全球variables列表“触摸”的网站。 不是所有的或者是在网站脚本的任何地方使用的那些或者被添加的或者被编辑的。
在Chrome中,转到开发工具并打开控制台。 然后input以下内容:
Object.keys( window );
这会给你一个所有全局variables的数组。
编辑
在Google上search一下之后,我find了一个方法。 你将需要firefox和jslinter插件。
一旦设置,打开jslinter,进入选项 – >检查左列的所有内容 , 除了“容忍未使用的参数” 。
然后在网页上运行jslinter并向下滚动结果。 您将有一个未使用的variables列表(全局,然后每个函数本地)。
现在运行Object.keys(window);
在控制台,并比较两者的结果,找出哪些使用。
由于这个问题是第一次在谷歌search如何列出全球性的JavaScriptvariables的方式,我会加我自己的答案。 有时你需要列出全局variables,看看你的代码是否没有泄漏到范围之外的variables(没有定义“var”)。 为此,在debugging控制台中使用它:
(function () { var keys=Object.keys( window ); for (var i in keys) { if (typeof window[keys[i]] != 'function') console.log(keys[i], window[keys[i]]); } })();
它将列出标准的全局variables,如窗口,文档,位置等。这些只是less数。 所以你可以很容易地find你的泄漏variables。
你可以尝试使用getters,为所有现有的全局variables创build。 在页面启动之前运行它:
Object.keys(window) // or Object.getOwnPropertyNames(window).concat( Object.getOwnPropertyNames(Object.getPrototypeOf(window)) ) // or whatever .forEach(function(name) { var d = Object.getOwnPropertyDescriptor(window, name), def = Object.defineProperty, log = console.log.bind(console); if (d && !d.configurable) return log("cannot detect accessing of "+name); def(window, name, { configurable: true, get: function() { log("window."+name+" was used by this page!"); if (d) { def(window, name, d); return d.get ? d.get() : d.value; } else { // it was not an own property delete window[name]; return window[name]; } }, set: function(x) { log("Ugh, they're overwriting window."+name+"! Something's gonna crash."); } }); });
当然,属性描述符等与旧版浏览器不兼容。 并注意有一些全局variables/ window
属性,可能不能以编程方式列出(如on*
处理程序),如果你需要他们,你将不得不明确列出他们在数组中。 查看相关的问题列出窗口对象的所有属性? 和跨浏览器有效的JavaScript名称 。
然而,我猜想运行一个代码覆盖工具,关于未声明的全局variables,如@stackErrobuild议,更有帮助。
将以下代码复制并粘贴到您的JavaScript控制台中
var keys = Object.getOwnPropertyNames( window ), value; for( var i = 0; i < keys.length; ++i ) { value = window[ keys[ i ] ]; console.log( value ); }
所有学分RightSaidFred( Javascript – 转储所有全局variables )
我希望能帮到你
简单的方法来列出我有时使用的全局variables。 首先把这个代码尽可能早的执行任何你的脚本之前。
var WINDOW_PROPS = Object.keys(window);
那么当你需要发现你的全局variables的时候,就可以这样做:
var GLOBALS = Object.keys(window) // filter the props which your code did not declare .filter(prop => WINDOW_PROPS.indexOf(prop) < 0) // prettify output a bit :) It's up to you... .map(prop => `${typeof window[prop]} ${prop} ${window[prop]}`) // sort by types and names to find easier what you need .sort(); console.log(GLOBALS.join("\n"));
我在这里使用了一些ES6function来缩短代码。 这对于生产来说还是不好,但对于debugging目的来说足够好,并且应该在现代浏览器中工作。
您可以尝试使用JetBrains PhpStorm,我可以在任何系统上免费试用30天。 然后你检查JSLint或JSHint,或者我都不记得,然后所有未使用的variables都加下划线,用不同的颜色(根据主题)突出显示,并在滚动条上可见,当你将鼠标hover在它们上面时,它表示未使用的variables;
编辑:我认为社区版本是免费的。