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

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

我们先创建一个index.html
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第1张图片
编写代码如下

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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让整个代码跑起来

这里 以谷歌浏览器为例 因为开发中 体验最好的无非就是谷歌
在这里插入图片描述
打开界面 它并不会有什么效果
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第2张图片
因为这些调试代码 要你打开开发者工具才会有效果
我们按键盘的 F12键 或者 在浏览器右键选择 检查
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第3张图片
然后 刷新界面 执行到 我们debugger的位置 就会停下来
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第4张图片
然后 如下图 箭头指向处 就是调用站 它会告诉你一些信息 例如 我们这里就告诉我们 目前是在b函数 是 a函数调用了它
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第5张图片
然后 我们在调用站 点击这个a 上面代码的位置 就会帮我们标出 具体是a的哪个位置调用了我们的b
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第6张图片
调用站上 再点往下一个 它就帮你把调用a的位置都标出来了
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第7张图片
其次是 我们在调用站 切换函数时 边上还会提示作用域 作用域里面的变量对应值 就是这个函数内能拿到的属性
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第8张图片
以及这些属性都会告诉你它们的上级是谁 a_var和b_var 父级都是 window
然后 b_var 告诉你 他还没赋值 因为 我们b断点这个位置 b_var = 的代码还没执行

下图 我们切换到 a 就能看到 a的作用域
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第9张图片
我们作用域 这里给我们分成了三种
本地作用域 就是方法中拿到的 参数 或者 在方法中声明的
脚本 就是 我们在文件外围通过let声明的 例如 module_var
全局 就是 我们在文件外围通过 var声明的 例如 global_var
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第10张图片
然后 我们点击如下图指向处 就可以结束掉当前断点 它就会一直正常执行 直到进入下一个debugger
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第11张图片
我们点击一下 因为我们代码中就这一个断点 所以 断点调试就直接整个结束了
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第12张图片
然后 我们还是刷新 重新进入断点 然后 我们可以手动给代码打上断点 例如 下图 我们点击 21行代码前面一点点的位置 整个变成蓝色 说明 我们已经标记上了一个断点
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第13张图片
这次 我们再点击这个继续执行 如下图
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第14张图片
然后 它就会进入我们手动标记的这个断点啦
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第15张图片
而且我们手动点上去这个断点 会一直存在 触发你把浏览器关了 不会说 你把页面刷新了就没了

然后 是我们下图指向的第二个工具 跳过下一个函数的调用
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第16张图片
我们每点一下它都会往下再走一步
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第17张图片
但 我们下到调用 c 的这个位置 如果 我们对c里面的逻辑 不感兴趣 点这个 跳过下一个函数
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第18张图片
逻辑就不尽然这个c函数了 直接跳过它了
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第19张图片
然后 是下图指向的 进入下一个函数
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第20张图片
常规情况下 依旧是 点一下 就往下走一步
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第21张图片
但当我们 遇到函数调用 例如 下图 遇到C函数 我们点击这个进入下一个函数
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第22张图片
我们就会进到这个c函数中
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第23张图片
然后 如下图指向 跳出当前函数 例如 当前所处的这个b函数 我们对它的内容不感兴趣
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第24张图片
我们点一下 跳出当前函数 它马上就会跳出当前这个函数
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第25张图片
然后是下图指向的 单步测试 这个按钮是我们之后最常用的 就是 单纯的下一步 代码怎么走 它就怎么走 遇到方法就进 方法执行完了 它就出 一步一步往下走
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第26张图片
然后 我们可以将鼠标放到某一行代码 前面 如下图 放在了 17行前面右键 就会出现一个菜单
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第27张图片
然后 我们选择 第一个选项 继续执行到此处
就会瞬间执行到这个位置 不再停留中间的过程了
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第28张图片
但是 这个东西的问题是 只能在同一个作用域中去用

比如 我们b想跳c
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第29张图片
直接 整个断点就结束了 因为 它都无法确定 能不能运行到c这个位置
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第30张图片
然后 我们下图指向这个 可以让断点直接失效
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第31张图片
这里我们点一下改为选中状态
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第32张图片
重新刷新界面 所有断点就都无效了
以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法_第33张图片

你可能感兴趣的:(javascript,开发语言,ecmascript)