今天来说个比较实用的东西
用浏览器开发者工具 对 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) {
debugger
console.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行前面右键 就会出现一个菜单
然后 我们选择 第一个选项 继续执行到此处
就会瞬间执行到这个位置 不再停留中间的过程了
但是 这个东西的问题是 只能在同一个作用域中去用
比如 我们b想跳c
直接 整个断点就结束了 因为 它都无法确定 能不能运行到c这个位置
然后 我们下图指向这个 可以让断点直接失效
这里我们点一下改为选中状态
重新刷新界面 所有断点就都无效了
