非零基础自学前端最后一遍二 JavaScript基础 7 JavaScript函数 7.20 Chrome的debug调试

た入场券 2024-03-22 16:01 83阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  二 JavaScript基础
         *  7 JavaScript函数
         *   *  7.20 Chrome的debug调试
             *   *  7.20.1 Chrome的debug调试技巧一
                 *  7.20.2 Chrome的debug调试技巧二

![在这里插入图片描述][85425cc108c54bf1a7fe1d9b78c5b146.png_pic_center]

#### 二 JavaScript基础 ####

#### 7 JavaScript函数 ####

##### 7.20 Chrome的debug调试 #####

###### 7.20.1 Chrome的debug调试技巧一 ######

![在这里插入图片描述][7b160dd43c174308b65fd22df1a3d111.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <script>
    
        // 终极技巧: debug
        // 代码出问题的时候, 产生bug, debug找出bug
    
        // chrome中调试技巧 debug
        function foo(name) {
         
          console.log("foo函数执行:", name)
        }
    
        function bar() {
         
          console.log("bar函数执行~");
          foo()
        }
    
        bar()
    
        for (var i = 0; i < 10; i++) {
         
          console.log(i)
        }
    
      </script>
    
    </body>
    
    </html>

![在这里插入图片描述][bc93697008a047c2b8d0ef6acaae8f59.png_pic_center]

看到这里源代码，如果说，我想在bar() 这儿停住

![在这里插入图片描述][463f8e96046849abba31908baf16c8f6.png_pic_center]

点一下行号，这样就加上了一个断点，这下直接刷新，别关调试工具

![在这里插入图片描述][9ec648eb36cc42659fe0ca8e233f6f23.png_pic_center]

效果很明显，它停在了bar()

![在这里插入图片描述][247066a27dfe4c0ea862c7e3a52d40ee.png_pic_center]

现在程序还没有任何输出，这也说明确实在bar() 那儿停了

再点一下，就可以删除断点

![在这里插入图片描述][9e4594f00df845b3bbd1f96fbeebaeac.png_pic_center]

这次再运行就会直接跑完了，这是一种打断点的方式，我们也可以直接在代码中加上断点

![在这里插入图片描述][dcf59218f5b54a98842a8c174f446388.png_pic_center]

这样直接运行

![在这里插入图片描述][9d26cbc1845842f7afd6398860246304.png_pic_center]

这样也会停在那儿，debugger 标识符就是在代码中打断点的方式

![在这里插入图片描述][470fd43381fb414c84db16902d7e0163.png_pic_center]

一个一个看，首先是那个watch，意思是监听

![在这里插入图片描述][dfa1ac9433734c56bdb6e2ae7e78dc68.png_pic_center]

通过加号给它整上一个 i

![在这里插入图片描述][3f94a1e64b2e4b0e841d8dc3455286f5.png_pic_center]

点这个，让代码执行下去

![在这里插入图片描述][88c9ba6b8a4b45b6ac2ec8758cd92d22.png_pic_center]

执行到这儿，可以看到，i有值了，初始化为0

继续执行下去

![在这里插入图片描述][cba49a94dd60427ab9ab968d00129831.png_pic_center]

执行完 i++，进行 i < 10 的判断之前， i + 了1，成为1

![在这里插入图片描述][6211264cfa3f4e96ad27df5b406f71f8.png_pic_center]

同时输出也输出了0

![在这里插入图片描述][bb2a2d45397449a6bb229ce5631b29d6.png_pic_center]

第二个就是“断点们”

![在这里插入图片描述][5ff0e0a7ae72459191bacbec144b086a.png_pic_center]

我们打上的断点都能在这儿看到

![在这里插入图片描述][90e2f2b29c264a7fb8f9949ca886f394.png_pic_center]

也可以直接取消，让断点失效

![在这里插入图片描述][a0b74114b7044c9e9003ce490a15ad32.png_pic_center]

也可以直接点这个，让所有断点失效

![在这里插入图片描述][8d763b00a2794ee4840d7afb1cc7c9b3.png_pic_center]

![在这里插入图片描述][197197a46b714fd0afc5d44920e80699.png_pic_center]

第三个Scope 是作用域

再来点代码，让其形成一个稍微复杂一点的作用域

再次刷新进行调试

![在这里插入图片描述][03b66d71bd4049f38f6f0e67c58bba51.png_pic_center]

走到这儿的时候

![在这里插入图片描述][f470f8a21ae246b388fa682e73a9b70f.png_pic_center]

点这个，进入fn函数

![在这里插入图片描述][ef637e0329714fe39e8064133637fddc.png_pic_center]

![在这里插入图片描述][f1de22eaf64745bfb0e50bf1edf77f9a.png_pic_center]

这会儿Scope里面就有东西了

*  Local：本地
 *  Closure：闭包
 *  Global：全局，有个window

![在这里插入图片描述][702403cefb564660af3ab47f3ca0aed7.png_pic_center]

执行到当前输出这行的时候，这些值是什么个情况

再下去就是 Call Stack，函数调用栈

![在这里插入图片描述][f3c56eeba28d4d8eb13406c74c4a3172.png_pic_center]

这里可以看到函数的调用过程。

###### 7.20.2 Chrome的debug调试技巧二 ######

![在这里插入图片描述][b1b3e69614f54478a450b8d59dcadacf.png_pic_center]

这俩按钮代表的东西是一样的

![在这里插入图片描述][5f7500a4f3cf4eb69026da8a0692978a.png_pic_center]

首先第一个，Resume，恢复，点击之后代码会恢复执行完毕，当然我们有多个断点的时候，恢复只是恢复当前位置的端点

![在这里插入图片描述][dfe569fcba87444cb8104cb40c7a68f3.png_pic_center]

简单点说恢复就是“跳过当前断点继续执行”

第二个

![在这里插入图片描述][3ecff8c140694d1a8cc0f8ce83c6ed66.png_pic_center]

执行下一行代码

![在这里插入图片描述][87ffd5b0764d4cdcb3b42167c230602b.png_pic_center]

但是需要注意的是，这个下一行，它不会进入函数内部让我们看，相当于“黑盒”

如果当来到某个函数的时候，想要进入函数，那就要用到第三个按钮 了

![在这里插入图片描述][2f8d7877176b411fad641a1c5ca393fb.png_pic_center]

进入函数调用

![在这里插入图片描述][702f45bf11024d9494dc008711326c55.png_pic_center]

![在这里插入图片描述][ad1b5869aed64748b69cb2e28c2ca6d3.png_pic_center]

当然接着那个按钮就很明显了，当我们进入查看某个函数的时候，不想看了，想出去，一种办法就是一行一行的运行结束，另一种方法就是点击这个按钮，直接跳出去

![在这里插入图片描述][18c34340eda341ff897b0851cce34e6f.png_pic_center]

第五个按钮，其实也可以进入函数内部，一行一行的看

这里来一个异步函数

setTimeout(function () {
        
          console.log("匿名函数2s后执行...")
        }, 200);

![在这里插入图片描述][4d68618b1b62438aaec2745d4602238b.png_pic_center]

这里走到这儿，如果我们点击第五个按钮

![在这里插入图片描述][247fb1852f4345aeab6157747c771ba3.png_pic_center]

它会直接就过去了

如果我们点第三个

![在这里插入图片描述][05cc2286105549e49995e54bb020f249.png_pic_center]

这次进来了，过了0.2s才进来的

[85425cc108c54bf1a7fe1d9b78c5b146.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d81980db45e8482fbcf11901926ab06f.png
[7b160dd43c174308b65fd22df1a3d111.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a11b8b189838499b8524eb0af17eab1b.png
[bc93697008a047c2b8d0ef6acaae8f59.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/88ae7118b8e24ac3a2ff4b084a21de04.png
[463f8e96046849abba31908baf16c8f6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3b416cc23c8748daa6768fdc83bc70ed.png
[9ec648eb36cc42659fe0ca8e233f6f23.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f16e568bddfc4481abe0d8a416c7b01f.png
[247066a27dfe4c0ea862c7e3a52d40ee.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/13fe80d9c6bd47d0be4a4c9bf52f5a2a.png
[9e4594f00df845b3bbd1f96fbeebaeac.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/13c7fadeae2949f9811deeeff25e2fc9.png
[dcf59218f5b54a98842a8c174f446388.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c7ff11719365448b8779ee816da2c482.png
[9d26cbc1845842f7afd6398860246304.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/10ea931d30cb447686e1bed8ab5bda1b.png
[470fd43381fb414c84db16902d7e0163.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/2474f9306075421d926a04cb448249bf.png
[dfa1ac9433734c56bdb6e2ae7e78dc68.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5a9ffedd15fe4db9880f8bf197e7e2d2.png
[3f94a1e64b2e4b0e841d8dc3455286f5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0e6d11b7641d4e1ba6dfb6a600d971a1.png
[88c9ba6b8a4b45b6ac2ec8758cd92d22.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b03258a2345d444286d229564156c1dc.png
[cba49a94dd60427ab9ab968d00129831.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/22fc1eec030649b68e19dc8372adbbbc.png
[6211264cfa3f4e96ad27df5b406f71f8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/eb57a8162cdf4b948b16721b725e9d18.png
[bb2a2d45397449a6bb229ce5631b29d6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7e5a200f67154162880bfe256e98f644.png
[5ff0e0a7ae72459191bacbec144b086a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/13985befb6d14626bd4feebda04c4952.png
[90e2f2b29c264a7fb8f9949ca886f394.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5529fdcbe6cd4b2dbf8c113799dfd13d.png
[a0b74114b7044c9e9003ce490a15ad32.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/ffcad5e92dc04c29a923a2b09b2a982b.png
[8d763b00a2794ee4840d7afb1cc7c9b3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bb33ac13c4a94d6b9fd12c140ee5653b.png
[197197a46b714fd0afc5d44920e80699.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/738c8b19626440d2a6ce63a3cbc49d67.png
[03b66d71bd4049f38f6f0e67c58bba51.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/50b3e5704ac24be0bf31ce7c3aff533c.png
[f470f8a21ae246b388fa682e73a9b70f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/52df78d2ab6a4277a6640f45da3dde06.png
[ef637e0329714fe39e8064133637fddc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d785694b0d9748f8ac1dd3d92147c10e.png
[f1de22eaf64745bfb0e50bf1edf77f9a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0df4c89c0b4b4a7588d23fd882fd2f50.png
[702403cefb564660af3ab47f3ca0aed7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/01bce3b443ee4d1c975d718c62071504.png
[f3c56eeba28d4d8eb13406c74c4a3172.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/ca5e9cd1323b4971803556c27a512d6e.png
[b1b3e69614f54478a450b8d59dcadacf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c57a18383efa4bebb26cbf1ab86467d7.png
[5f7500a4f3cf4eb69026da8a0692978a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/ba6500ac85984cad8e92d9613cadc59c.png
[dfe569fcba87444cb8104cb40c7a68f3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8ef9e94fc5e94ec1a41f63c4087ea0f1.png
[3ecff8c140694d1a8cc0f8ce83c6ed66.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6796386b0dcd44f08c4ffb3635a25ec3.png
[87ffd5b0764d4cdcb3b42167c230602b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/94bc0ea13f3948719d995d3e89064cd2.png
[2f8d7877176b411fad641a1c5ca393fb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/74c0f7d7abf44d77a89f9e503f7abeae.png
[702f45bf11024d9494dc008711326c55.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/97f0004cc59a46928ad29bc4a42e8e2e.png
[ad1b5869aed64748b69cb2e28c2ca6d3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a4b22106e676481097add690003685f6.png
[18c34340eda341ff897b0851cce34e6f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/878def62ae5742bf843d42eaf19dd874.png
[4d68618b1b62438aaec2745d4602238b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e5f49eb51a854cf1a91a7a930061e633.png
[247fb1852f4345aeab6157747c771ba3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/db9fee4f44824f6da32245fc0c247326.png
[05cc2286105549e49995e54bb020f249.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/05955ba9d2a540db9f7190211af6cb3a.png