以谷歌浏览器为例讲述 JavaScript 断点调试操作用法-编程知识

以谷歌浏览器为例讲述 JavaScript 断点调试操作用法

今天来说个比较实用的东西
用浏览器开发者工具对 javaScript代码进行调试

我们先创建一个index.html
在这里插入图片描述
编写代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function a() {let a_var = "a";b(a_var);}function b(a_var) {debuggerconsole.log(global_var);let b_var = 'b' + a_var;c();}function c() {let c_var ='c';}let module_var = 'module';var global_var = 'global';a();</script>
</body>
</html>

这是我们最基本的一个实例代码我们在 a中调用b b中调用c 在中间打印了一些变量
然后在b中打了一个断点 debugger
最后在最下面调用a让整个代码跑起来

这里以谷歌浏览器为例因为开发中体验最好的无非就是谷歌
在这里插入图片描述
打开界面它并不会有什么效果

因为这些调试代码要你打开开发者工具才会有效果
我们按键盘的 F12键或者在浏览器右键选择检查

然后刷新界面执行到我们debugger的位置就会停下来

然后如下图箭头指向处就是调用站它会告诉你一些信息例如我们这里就告诉我们目前是在b函数是 a函数调用了它
在这里插入图片描述
然后我们在调用站点击这个a 上面代码的位置就会帮我们标出具体是a的哪个位置调用了我们的b

调用站上再点往下一个它就帮你把调用a的位置都标出来了

其次是我们在调用站切换函数时边上还会提示作用域作用域里面的变量对应值就是这个函数内能拿到的属性
在这里插入图片描述
以及这些属性都会告诉你它们的上级是谁 a_var和b_var 父级都是 window
然后 b_var 告诉你他还没赋值因为我们b断点这个位置 b_var = 的代码还没执行

下图我们切换到 a 就能看到 a的作用域
在这里插入图片描述
我们作用域这里给我们分成了三种
本地作用域就是方法中拿到的参数或者在方法中声明的
脚本就是我们在文件外围通过let声明的例如 module_var
全局就是我们在文件外围通过 var声明的例如 global_var
在这里插入图片描述
然后我们点击如下图指向处就可以结束掉当前断点它就会一直正常执行直到进入下一个debugger

我们点击一下因为我们代码中就这一个断点所以断点调试就直接整个结束了

然后我们还是刷新重新进入断点然后我们可以手动给代码打上断点例如下图我们点击 21行代码前面一点点的位置整个变成蓝色说明我们已经标记上了一个断点
在这里插入图片描述
这次我们再点击这个继续执行如下图

然后它就会进入我们手动标记的这个断点啦

而且我们手动点上去这个断点会一直存在触发你把浏览器关了不会说你把页面刷新了就没了

然后是我们下图指向的第二个工具跳过下一个函数的调用
在这里插入图片描述
我们每点一下它都会往下再走一步

但我们下到调用 c 的这个位置如果我们对c里面的逻辑不感兴趣点这个跳过下一个函数

逻辑就不尽然这个c函数了直接跳过它了

然后是下图指向的进入下一个函数
在这里插入图片描述
常规情况下依旧是点一下就往下走一步

但当我们遇到函数调用例如下图遇到C函数我们点击这个进入下一个函数

我们就会进到这个c函数中

然后如下图指向跳出当前函数例如当前所处的这个b函数我们对它的内容不感兴趣
在这里插入图片描述
我们点一下跳出当前函数它马上就会跳出当前这个函数

然后是下图指向的单步测试这个按钮是我们之后最常用的就是单纯的下一步代码怎么走它就怎么走遇到方法就进方法执行完了它就出一步一步往下走
在这里插入图片描述
然后我们可以将鼠标放到某一行代码前面如下图放在了 17行前面右键就会出现一个菜单

然后我们选择第一个选项继续执行到此处
就会瞬间执行到这个位置不再停留中间的过程了

但是这个东西的问题是只能在同一个作用域中去用