谷歌浏览器调试JavaScript小技巧

谷歌浏览器不仅可以用来上网，更像是开发者强大的开发辅助工具。

如果你想做好你的工作，你必须先磨快你的工具。接下来，我将与大家分享Chrome的一些使用方法。

如果读者知道如何在Chrome中添加JavaScript断点，请继续阅读。否则，自己编脑子。

如果有这样一段代码：

复制代码如下： var a=1；

函数测试(){ var a，b，c，d，e；

a=2；b=a-1；b=9；c=3；d=4；e=(a b * c)*(a-d)；

返回e；}

test()；

代码本身并不重要，但形式很重要。

如果E是我们需要的最终结果，但是结果被发现是不正确的，我们就在E被赋值的那条线上破掉这个点。

中断断点后，将鼠标移到一个变量上稍作停顿，Chrome会提示您输入该变量的当前值。

但是因为表达式复杂，只看单个变量的值是没有用的。它们看起来都很正常，但经过计算却是错误的。

这时，你大概想知道(a b c)的结果。不要着急，首先选择表达式，然后将鼠标移动到所选区域进行短暂停留。

Chrome刚告诉你答案。更有趣的还在后面。

直接在选中区域点击鼠标右键，弹出菜单。前两项是[添加到观察]和[在控制台中评估]。具体查看参考图片。

所谓手表，可以理解为监控。有些表达式很重要，可能需要在整个调试过程中实时监控表达式的值。这时，手表就可以用了。

例如，我们将断点设置在“b=9；”。在这一行中，添加值为1的watch :“a-b”。图片：

单击“下一步”并执行“b=9；”。也就是说，b的值发生了变化。这时，看watch:'a-b '的值，也就是-7。

这样就达到了实时监控的效果，调试也更加方便快捷。

接下来，让我们看看控制台。

当然，控制台就是控制台，表达式可以直接在控制台中求值。

比如想知道(a b c)的结果，直接复制到控制台按enter，结果就出来了。

等等，好像出了什么问题，为什么控制台要知道a，b，c的值？

没有断点，在控制台中执行JavaScript代码是面向全局的。也就是说，此时控制台中定义了一个变量x，这个x的范围是全局的。

如果在程序中断时使用控制台，控制台的作用域将面对中断时的作用域。也就是说，断点设置在哪里(或者代码执行在哪里)，控制台的作用域就在哪里。

就本例而言，变量A在全局范围内定义，值为1；同时，在函数测试的范围内定义了一个值为2的局部变量a。在“a=2；在断点下，在控制台中输入a，按enter，然后打印undefined。

此时由于程序在函数测试内部中断，在函数测试中执行，控制台的范围也在函数测试中，所以输入a访问局部变量a，但此时没有赋值局部变量a，所以结果是未定义的。

这次先分享这么多，以后遇到有实力的人再继续分享，希望对读者有所帮助。