深圳网站商城定制设计,适合程序员做项目笔记的网站,合肥市做网站多少钱,做外贸公司网站大家好#xff0c;我是前端西瓜哥。本文讲解如何使用浏览器提供的工具进行 JS 代码的断点调试。
debugger
在代码中需要打断点的地方#xff0c;加上 debugger#xff0c;表示一个断点。浏览器代码执行到该位置时#xff0c;会停下来#xff0c;进入调试模式。
示例代码…大家好我是前端西瓜哥。本文讲解如何使用浏览器提供的工具进行 JS 代码的断点调试。
debugger
在代码中需要打断点的地方加上 debugger表示一个断点。浏览器代码执行到该位置时会停下来进入调试模式。
示例代码
function a() {let a_var a;b(a_var);
}function b(a_var_from_a) {debugger;console.log(global_var);let b_var b;c();
}function c() {let c_var c;
}let module_var module;
var global_var global;a();整体就是调用 a然后 a 调用 bb 调用 c然后有各种作用域的变量。
记得打开开发者工具面板没打开的话debugger 会静默失败。
下面是断点后的样子。 现在是 a 函数调用了 b 函数b 函数调用的时候用 debugger 加了个断点于是我们就停在这里了。
此时上下文状态和调用站会保留着方便我们排查是什么分支导致变量状态错误比如一个错误的条件判断让一个为 null 的变量没能变成一个普通对象导致访问它的属性报错。
手动打断点
在对应的行号点一下就可以了相当于加了个 debugger 关键字。 刷新页面后手动打的断点还会保留。
调用栈信息
首先是函数调用栈信息。 调用的起始端是一个匿名函数没有名字的函数都会显示 anonymouse这里是 script 最外层的直接调用所以没有名字。我本人建议多给匿名函数起个名字可读性会更好。但如果你有起名困难症不起也好。
匿名函数然后调用了函数 a函数 a 再调用了函数 b然后停下了。之后还会调用 c。
看到 b 旁边的蓝色箭头没它表示我们 正在观测哪个函数的上下文默认会选择栈顶。
你可以用光标选择你要观测的函数下的变量并且会高亮对应的代码。 作用域
我们看看某个函数的函数作用域的上下文。
找到 Scope 这个标签页目前我们可以看到有三种类型Local、Script 和 Global。
首先是 Local本地作用域。这里对应 b 函数的上下文可以看到1传入的变量2函数内部声明的变量以及 3this 值。
然后是 Script表示一个模块文件的最外层变量和全局变量不同只能被模块文件内的文件的代码访问。
最后是 Global全局作用域。 再补充一个比较常见的闭包作用域。如果一个函数是通过闭包产生的那在 Local 和 Script 还会有一个闭包作用域。 在函数中访问一个变量其实就是沿着这条链路去查找最先找到的那个如果找不到就会拿到 undefined。
当然除了这些还有不少比如块作用域Block、捕获作用域Catch Block、Eval 作用域、With 块作用域等篇幅原因不一一介绍了。
执行下一步
实际我们还要看看代码是否如预期进入我们希望的分支并拿到正确的值所以需要 让代码一点点执行下去观察状态的变化。
浏览器提供了各种执行下一步代码的方式。 我们一个个过一遍。
Resume 恢复脚本执行
首先是最左边这个 矩形三角形 的蓝色按钮它表示 结束当前断点恢复脚本运行。 但如果往下执行又遇到一个断点那又会进入调试模式。
于是在长循环的情况下就出不来了悲。 这时候恼羞成怒的西瓜哥有个办法长按这个按钮然后出现一个停止按钮点它会 结束所有的断点。
或者更常见的做法是只在特定判断条件下的打断点比如
todoItems.forEach(item {// item 不可能为 null我们来看看发生甚么事了if (!item) {debugger;}// ...
})Step over 跳过下一个函数
然后是跳过下一个函数。就是遇到下一个要执行的函数就不进去了执行完它继续往下运行。 为什么要跳过函数因为函数里面有很多代码或者里面又调用了其他函数要走好久才能回到当前函数。
如果我们只是想看当前函数的完整逻辑那就跳过其下的函数执行。
Step into 进入下一个函数
如果走着走着遇到一个函数进入这个函数。 注意浏览器环境自带的 api 方法是进不去的。
Step out 跳出当前函数
如果你不想再看当前函数的执行了想回到调用它的函数就可以选择这个方式。 Step 下一步
就是普通的下一步它会严格遵守代码的执行顺序比较常用。 Step into 和 Step 的区别
Step into 和 Step 在大体的表现上有些相同遇到函数是会进入函数内部的但在异步代码下行为有一些不同。
Step into 在遇到一个异步代码的回调函数会直接挂起并让后面的同步代码继续跑直到这个异步函数被执行然后进入这个函数。
而 Step 则符合代码的执行顺序先执行后面的同步代码然后再执行异步函数。
我们用一个实例演示一下。代码为
window.onclick () {debugger;setTimeout(() {console.log(inside);console.log(p1, performance.now() / 1000);}, 2000);console.log(p2, performance.now() / 1000);console.log(p3, performance.now() / 1000);
};Step into 的表现 可以看到Step into 会等待异步函数被执行才进入到函数内部然后停在它的首行。
然后是 Step Step 遵循正常的代码执行过程顺序先走完同步代码然后再进入异步代码。
直接跳到某一行
我们可能想直接跳到中间的一连串逻辑直接走到后面的某一行对此我们可以手动跳转。
具体做法是行号右键选择 continue to here。
需要注意这个地方必须是和当前位置在同一个函数下否则会等价于执行了 Resume。 其他
关闭断点功能
关闭断点功能deactivate breakpoint。
开启这个断点在打开开发者工具的条件下无效。 上一篇文章西瓜哥说了一个用定时器不断执行 debugger 的方式防止别人点点点看代码是怎么执行的。但这只能防小白我们把这个开了就无视 debugger 关键字了。
报错时断点
代码报错时我们希望知道报错那瞬间的上下文。
此时我们可以开启这个功能在报错且没有被捕获时浏览器会给你打一个断点然后你可以看看哪个变量出了问题。 还可以勾选这个 Pause on caught exceptions效果是错误被捕获时打断点 结尾
光说不练假把式西瓜哥建议你自己尝试一番。
编程是一个实操性很强的学科要自己动手调试这样才能更好地理解掌握。
我是前端西瓜哥欢迎关注我学习更多前端知识。
