We have a very large JavaScript application, where after many months of coding there have inevitably sprung a couple scope slip ups where a variable is defined without using the var
keyword in the following fashion:
我们有一个非常大的JavaScript应用程序,经过几个月的编码后,不可避免地会产生一些范围滑动,其中定义变量而不使用以下方式的var关键字:
function() {
x = 5; ...
}
instead of:
function() {
var x = 5; ...
}
This is happening somewhere - we're not sure where - and searching for the variable name in question is difficult, since it's a common word that appears 1000s of times in our source.
这发生在某个地方 - 我们不确定在哪里 - 并且搜索有问题的变量名称很困难,因为它是我们源代码中出现1000次的常用词。
Is there a way to ask Firebug to break on the line that first creates a given global variable? To clarify, I would like to break at exactly the instant when window.x
switches from undefined
to a defined value, and to break statement.
有没有办法让Firebug在首先创建给定全局变量的行上中断?为了澄清,我想在window.x从undefined切换到定义值,以及break语句的那一刻完全中断。
I've tried creating a watch expression and hoped I could turn it into a breakpoint, but I can't seem to create watch expressions without some kind of context or scope.
我已经尝试创建一个监视表达式,并希望我可以把它变成一个断点,但我似乎无法在没有某种上下文或范围的情况下创建监视表达式。
If this isn't possible with Firebug, I'd be interested in anything that can accomplish this in Firefox in general.
如果使用Firebug无法做到这一点,我会对能在Firefox中实现这一目标的任何事情感兴趣。
5 个解决方案
#1
Provided a few things
提供了一些东西
- You know the name of the variable
- You don't have a variable with that name in the global scope (declared outside functions), but only inside functions.
- There are calls to the function that declares the variable.
您知道变量的名称
在全局范围(在函数外部声明)中没有具有该名称的变量,但仅在内部函数中。
有函数调用声明变量。
this little script would do the trick:
这个小脚本可以解决这个问题:
<script type="text/javascript">
window.__defineSetter__("x", function(value) { console.trace(); });
x = 1;
</script>
You'll get a trace of the executed code before that assignment.
在分配之前,您将获得执行代码的跟踪。
It may fail to report some situations, so take a look at JSLint. Load all your JS files right there and lint them.
它可能无法报告某些情况,因此请查看JSLint。将所有JS文件加载到那里并将它们拖放。
#2
Here's another solution that only works in Firefox because it uses the Firefox-specific watch
method.
这是另一种仅适用于Firefox的解决方案,因为它使用特定于Firefox的监视方法。
Put this piece of Javascript at the very top of your html page, just after the <head>
tag:
将这段Javascript放在html页面的顶部,就在标记之后:
<script>
window.watch('x', function() { debugger });
</script>
Note that watch
works on any Javascript object (window
is the global Javascript object).
请注意,watch适用于任何Javascript对象(窗口是全局Javascript对象)。
#3
Here's the solution I ended up using by modifying Ionut G. Stan's solution:
这是我通过修改Ionut G. Stan的解决方案最终使用的解决方案:
window.__defineSetter__("name", function(value) {
if (value=="div") {
debugger;
}
});
I used debugger
instead of console.trace()
, so I could stop and look at it mid-execution. With console.trace()
I got a bazillion trace statements due to this line executing many times.
我使用调试器而不是console.trace(),所以我可以停止并在执行中查看它。使用console.trace()我得到了一个bazillion跟踪语句,因为这行执行了很多次。
The leaky scope turned out to be buried in Dojo, where Dojo is setting that variable to the name of a processed element.
泄漏的范围被证明是埋藏在Dojo中,Dojo将该变量设置为已处理元素的名称。
#4
View your web page on the SeaMonkey browser (I use version 1.1.16) and look at the error console, you will see a message of this type for each assignment to an undeclared variable :
在SeaMonkey浏览器上查看您的网页(我使用的是版本1.1.16)并查看错误控制台,您将看到针对未声明变量的每个分配的此类消息:
Warning: assignment to undeclared variable x
Source File: http://....js
Line: ##
#5
In addition to debugging, I would advise to check your code with JSLint, which reports unexpected assignments in the global scope as errors.
除了调试之外,我还建议使用JSLint检查您的代码,JSLint将全局范围内的意外分配报告为错误。
There are several command-line bundles of jslint, such as jslint4java which can be used cross-platform in Ant build scripts.
有几个jslint的命令行包,例如jslint4java,它可以在Ant构建脚本中跨平台使用。
#1
Provided a few things
提供了一些东西
- You know the name of the variable
- You don't have a variable with that name in the global scope (declared outside functions), but only inside functions.
- There are calls to the function that declares the variable.
您知道变量的名称
在全局范围(在函数外部声明)中没有具有该名称的变量,但仅在内部函数中。
有函数调用声明变量。
this little script would do the trick:
这个小脚本可以解决这个问题:
<script type="text/javascript">
window.__defineSetter__("x", function(value) { console.trace(); });
x = 1;
</script>
You'll get a trace of the executed code before that assignment.
在分配之前,您将获得执行代码的跟踪。
It may fail to report some situations, so take a look at JSLint. Load all your JS files right there and lint them.
它可能无法报告某些情况,因此请查看JSLint。将所有JS文件加载到那里并将它们拖放。
#2
Here's another solution that only works in Firefox because it uses the Firefox-specific watch
method.
这是另一种仅适用于Firefox的解决方案,因为它使用特定于Firefox的监视方法。
Put this piece of Javascript at the very top of your html page, just after the <head>
tag:
将这段Javascript放在html页面的顶部,就在标记之后:
<script>
window.watch('x', function() { debugger });
</script>
Note that watch
works on any Javascript object (window
is the global Javascript object).
请注意,watch适用于任何Javascript对象(窗口是全局Javascript对象)。
#3
Here's the solution I ended up using by modifying Ionut G. Stan's solution:
这是我通过修改Ionut G. Stan的解决方案最终使用的解决方案:
window.__defineSetter__("name", function(value) {
if (value=="div") {
debugger;
}
});
I used debugger
instead of console.trace()
, so I could stop and look at it mid-execution. With console.trace()
I got a bazillion trace statements due to this line executing many times.
我使用调试器而不是console.trace(),所以我可以停止并在执行中查看它。使用console.trace()我得到了一个bazillion跟踪语句,因为这行执行了很多次。
The leaky scope turned out to be buried in Dojo, where Dojo is setting that variable to the name of a processed element.
泄漏的范围被证明是埋藏在Dojo中,Dojo将该变量设置为已处理元素的名称。
#4
View your web page on the SeaMonkey browser (I use version 1.1.16) and look at the error console, you will see a message of this type for each assignment to an undeclared variable :
在SeaMonkey浏览器上查看您的网页(我使用的是版本1.1.16)并查看错误控制台,您将看到针对未声明变量的每个分配的此类消息:
Warning: assignment to undeclared variable x
Source File: http://....js
Line: ##
#5
In addition to debugging, I would advise to check your code with JSLint, which reports unexpected assignments in the global scope as errors.
除了调试之外,我还建议使用JSLint检查您的代码,JSLint将全局范围内的意外分配报告为错误。
There are several command-line bundles of jslint, such as jslint4java which can be used cross-platform in Ant build scripts.
有几个jslint的命令行包,例如jslint4java,它可以在Ant构建脚本中跨平台使用。