debug用法

调试理解

简介：在 JavaScript 开发过程中，代码可能存在一些语法或者逻辑上的错误，导致程序不能得到我们想要的结果，这时就需要我们找到并修复这些错误，我们将查找和修复错误的过程称为调试或代码调试。

控制台：看控制台输出的错误，其中包括错误类型、错误描述以及错误出现的位置（即错误所在的行）

调试js代码：

• 最简单的方法就是使用 console.log()、document.write()、alert() 等方法来打印程序中各个变量、对象、表达式的值，以确保程序每个阶段的运行结果都是正确的。推荐console.log()

  不过调试完后要手动清理干净

• 断点调试：Debug

debug

1. js调试（Debug）

   借助调试器工具进行的程序调试

2. 在Chrome浏览器的开发者工具中的Sources标签页

   • 找到要调试的文件，打断点，只需要在调试代码前面单击行号

     • 断点调试：打好断点后，刷新一下，就进入断点调试了

       未刷新前的
       

       刷新后的
       

       解析：

       • 播放按钮：运行到下一个断点，F8

       • 半圆箭头一点：逐行运行（Step into，第四点调节器有详讲），F10

       • 向下箭头：进入下一个函数调用（Step over，第四点调节器有详讲），F11

       • 向上箭头：走出当前的功能-移位（Step out，第四点调节器有详讲），shift+F11

       • 向右箭头：步进，F9

       • 标签斜杠：停用断点，Ctrl+F8

       • 暂停：暂停异常

     • vscode中也可以直接加断点，顶部标签栏的运行，启动调试

       启动后就有，同时会打开浏览器，第一次文件启动调试，会有选择浏览器，在文件目录下还会多个.vscode的文件夹，多个launch.json文件，这个是打开浏览器的配置

       

       

3. debugger关键字

   除了可以借助浏览器的调试工具来给代码设置断点外，也可以使用 debugger 关键字在代码中设置断点，效果是一样的

   借助vscode的工具（在顶部的运行标签栏，启动调试）

   打开终端，可以切换调节控制台，就可以看到输出

4. 调试器

   调试器：是为调试程序的一个工具，

   • Step into：单步执行，遇到子函数就进入并且继续单步执行

     对应“半圆箭头一点”的图标

   • Step over：在单步执行时，在函数内遇到子函数时不会进入子函数内单步执行，而是将子函数整个执行完再停止，也就是把子函数整个作为一步。

     对应“向下箭头”图标

   • Step out：当单步执行到子函数内时，用step out就可以执行完子函数余下部分，并返回到上一层函数。

     对应“向上箭头”图标

     注意：如果遇到js内置的函数配置函数不算子函数，离开就到下一个执行

     eg：async与await，await不算，到await离开的话，就是直接离开async函数

     eg：数组的forEach配置的回调，不算forEach的子函数，离开就是开启下一次循环

5. 特点：

   • 调试器会先跟踪同步代码的每⼀步，遇到异步的，会先跳过去

   • 异步和异步的调试：异步和异步的，如果遇到debug两个异步代码区，只会追踪最后异步代码区的，如果是其他的异步代码区执行完了才会追踪，然后又跳到最后异步代码区

     如果不想这种情况发生，可以在异步的代码区加多几个断点

   • 调试到某一步，并不会执行那步，是表示要开始了，等你选择走下去，才会执行

   • 断点一般加在语句或执行完的大括号上，或一个函数区间

6. 如有错误，请指点一二