你需要知道的javaScript的调试

761 阅读7分钟

背景

在写代码的过程中,难免会出现一些问题,那么如何查找问题以及找到问题出现在什么地方至关重要。可能平常在开发过程中,大家可能并没有怎么在意调试代码,大部分都是通过console.log来打印日志进行查找。这种方式不是说不行,只能说不够优雅(装逼)。这里就介绍下如何借助vscode插件来实现代码的调试以及一些常见的调试方法,方便大家找到代码中的问题。

Debugger for Chrome

利用在vscode插件进行js代码的调试,这个是笔者比较推荐的。可以在vscode的代码中看到你想要看到的内容,变量值,运行堆栈什么的。熟练使用绝对是开发调试一大利器。具体使用方式如下

  • 第一步当然是去vscode的扩展中心搜索Debugger for Chrome插件进行安装

image-20210803113506257

  • 点击左侧调试按钮进入调试文件的配置

image-20210803113715870

image-20210803113829929

  • 选择之后就会在项目根目录生成一个.vscode的文件夹并且会生产一个默认的配置文件

image-20210803113955644

调试的时候主要是通过url来进行调试的,所以一定要保证你的服务启动端口和这个url中的一致,如果不一致就改为你启动服务的端口。

  • 这里需要注意一点webRoot是相对于你的主目录根路径的,如果你是调试主目录中的某个子项目就需要配置这个路径
"webRoot" : "${workspceFolder}/app1"
  • 简单说下这里参数的意思
"type": "调试的宿主类型"
"request": "打开新的浏览器标签的方式"
"name": "调试窗口定义的名字"
"url": "需要调试的url"
"webRoot": "调试的主目录"
  • 开始调试,选择你配置的调试文件,然后点击左侧的绿色的三角按钮

image-20210803115037821

image-20210803115114925

  • 出现如下操作栏就是开启调试成功了

image-20210803115216189

  • 这里需要注意的情况是,一般现在都是前后端分离的项目,需要先把项目运行起来,启动本地开发服务器,然然后在点击调试按钮,这样会新打开一个浏览器,就可以进行愉快的调试了,在你想调试的代码前面打断点,就可以了

image-20210803115615796

这样就可以在编辑器中进行代码调试,非常方便

JavaScript Debugger

这个是vscode的另一个插件,是内置在vscode中的。优点就是少配置就可以跑起来调试,这里就看大家的喜好程度了,介绍下这个插件的使用过程

  • 这个插件是内置的,所以默认就是开启的,也支持一些自定义配置,打开用户设置然后搜索debug就会出现设置选项如图

image-20210803135651455

用户的自定义设置就显示在右侧的配置项里,大家可以自行设置

  • 开启debug模式

当我们打开项目的package.json的时候,默认在npm script脚本命令的上方会出现一个调试的按钮,然后点击选择调试的命令就可以进入调试模式了

image-20210803140026625

当点击这个调试之后,会出现一个选择框选择一个命令运行调试环境

image-20210803140201931

然后选择serve开启本地服务器,就可以进行本地代码调试了,会开启一个新的浏览器。大致现象和上一个插件相似。具体的调试步骤也可参考上个插件,这个插件的好处就是少配置,开机可用。大概率不需要多自定义配置,而且调试和启动本地服务两个步骤合二为一,更加简便

Chrome and Debugger

这个算是传统方式了,很多人的调试估计都用过这个方式,可能现在也都还在使用。就是利用谷歌浏览器的开发者工具进行调试。可能也有一些人没怎么用过这个方式,这里就介绍下用开发者工具如何调试前端代码。

  • 首先不用说,你需要安装一个Chrome浏览器
  • 然后使用f12打开开发者调试工具,大概是这个样子

image-20210803141205018

  • 如果想查看某一行代码的执行情况,就需要在这一行之后打上一个断点,在开发者工具中打断点的方式是这样的
打开Sources → 打开你要调试的js代码文件 → 在行号上单击下

如图:

image.png

蓝色的标签就是打的断点,当你再次刷新页面的时间就走进去了断点。

sources面板有三个模块

image.png

第一个是来选择资源的,当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件;第二个是js调试窗口,可以在左边打断点,刷新页面,进行调试。第三个窗口重点说明一下

image-20210803144313596

这几个按钮,就是调试的时候的主要功能键了

  1. 单步执行,在断点处暂停
  2. 单步跳过,会跳到下一个断点
  3. 单步进入,会进入函数内部调试
  4. 单步跳出,会跳出当前这个断点的函数
  5. 一步步执行
  6. 使所有断点临时失效
  7. 不要在异常处暂停
  8. 若抛出异常则需要暂停在那里
  9. 监听表达式 不需要一次又一次地输入一个变量名或者表达式,你只需将他们添加到监视列表中就可以时时观察它们的变化
  10. 所有断点的管理面板
  11. 可以看到相当多实用的信息,比如this的指向,是否有值,断点是对象还是其他等
  12. 在一行代码里暂停时,可以在 Call Stack 面板查看是哪些栈将你带到了当前断点(到达当前函数调用了哪些函数)。如果不是在一行代码里暂停, Call Stack 面板是没有内容的。点击函数会跳到此函数调用的地方。蓝色箭头是当前查看的函数。在 Call Stack 面板里右键,选择 Copy stack trace 可以将面板里的 stack 信息复制到 clipboard。
  13. 针对某一个请求或者请求的关键字设置断点
  14. 右键单击某个DOM元素,并选择Break on下的subtree modifications。这样调试器就可以在脚本遍历到该元素并且要修改它的时候自动停止,以让用户进行调试检查
  15. Global listener
  16. 在监听器监听到某个事件发生的时候,断点暂停
  17. Trusted Type violations 在异常发生时暂停 script 运行

主要使用的就是这个些功能了,这些可以调试到非常细致,但是这个只能在浏览器中,编辑器中的代码不会有任何信息。

Debugger

这个是js的关键字,其实就是以代码的方式往浏览器中打断点,和在浏览器开发者工具中直接打断点结果相同

Console.log

关于这个来调试代码,相信大家都是用过的,那里需要调试就在那里打印日志。这个方法就会把想要知道的变量、值啥的输出到浏览器日志中,方便查看,也是一种调试方式,但是不太推荐,对代码侵入较大。

小结

总体而言,用来调试的话就用vscode插件或者谷歌浏览器的调试面板,这样对代码的侵入比较小,对于调试的信息也比较详细,也是笔者比较推荐的,如果觉得有用欢迎点个赞吧