Chrome开发者工具调试JavaScript进阶技巧：断点、Watch与Console作用域

Chrome调试基础与断点设置

Chrome浏览器不仅是日常上网的工具，对开发者而言，它更是一款功能强大的辅助开发利器。

工欲善其事，必先利其器，下面将分享一些Chrome开发者工具的实际使用技巧。

如果读者已经掌握在Chrome中添加JavaScript断点的方法，请继续阅读；若尚未了解，建议先自行查阅相关资料。

假设存在如下代码片段：

var a = 1;
function test(){
 var a, b, c, d, e;
a = 2;
 b = a - 1;
 b = 9;
 c = 3;
 d = 4;
 e = (a + b * c) * (a - d);
return e;
}
test();

代码的具体逻辑并非重点，关键在于其呈现的形式。

假设e是我们最终期望得到的结果，但发现计算结果有误，此时可以在给e赋值的这一行代码处设置断点。

设置断点后，将鼠标悬停在某个变量上并稍作停留，Chrome便会提示该变量当前的值。

然而，当表达式较为复杂时，仅查看单个变量的值往往难以发现问题，因为每个变量看起来都正常，但最终计算结果却不正确。

此时，你可能希望知道(a + b * c)这一部分的具体结果。无需担忧，只需选中该表达式，将鼠标悬停在选中区域上稍作停留。

Chrome会直接显示计算结果。更有用的功能还在后面。

利用Watch监控表达式

直接在选中的表达式区域单击鼠标右键，会弹出菜单，其中前两项分别为：[Add to watch]（添加到监视）和[Evaluate in console]（在控制台中求值）。具体界面请参考图片。

所谓Watch（监视），可以理解为对表达式的实时监控。对于某些重要表达式，若需在整个调试过程中持续观察其值的变化，即可使用Watch功能。

例如，我们将断点设置在"b = 9;"这一行，然后添加Watch表达式:"a - b"，此时其值为1。如图：

点击“下一步”执行"b = 9;"，即b的值发生变化。此时再观察Watch表达式:"a - b"的值，结果变为-7。

这样就实现了实时监控效果，使调试过程更加便捷高效。

Console作用域与调试技巧

接下来介绍Console（控制台）的相关用法。

Console即控制台，表达式可以直接在控制台中进行求值。

例如，若想获取(a + b * c)的结果，直接将其复制到控制台中并按回车，结果便会显示出来。

但这里可能存在疑问：为什么控制台能知道a、b、c的值？

在没有断点的情况下，在控制台中执行JavaScript代码，其作用域是全局的。也就是说，此时在控制台中定义的变量x，其作用域为全局。

如果在程序中断的情况下使用控制台，那么控制台的作用域将指向断点所在的作用域。换言之，断点设置在哪里（或代码执行到哪里），控制台的作用域就在哪里。

就本例而言，全局范围内定义了一个变量a，值为1；同时在function test作用域内定义了一个局部变量a，值为2。若在"a = 2;"处下断点，在控制台中输入a并按回车，打印结果为undefined。

这是因为此时程序在function test内部中断，执行到了function test中，因此控制台的作用域也位于function test内。此时输入a访问的是局部变量a，而该局部变量尚未赋值，故结果为undefined。

本次分享就到这里，后续遇到实用的技巧会继续分享，希望对读者有所帮助。