网络日志

前端调试的正确姿势

前言

平时工作量大,没有很多的自测时间,难免会在写代码的时候一不小心写出BUG,同时经常测试的时间又紧,留给开发修改缺陷的时间少,如果掌握正确的调试姿势,就能快速定位问题,从容应对。本文就主要讲一下前端调试的正确姿势,希望能够给到大家帮助。

查找代码

找到出错的地方才能debug,那怎么高效地找到出问题的代码。

console.log

通常我们遇到bug,第一直觉肯定看console的报错信息,

这种报错,错误原因和报错位置一目了然,很方便就定位到出问题的代码,所以console.log虽然显得有点低级,但它简单实用,简单的缺陷还是可以通过这种方法定位的,生产环境利用webpack去掉,就不会影响性能方面(有文章分析过console.log会导致内存泄漏,可以查看)。

全局查找

可以根据出问题的地方关键字,一般是dom元素的id,class,name或者页面中出现的唯一性的中文汉字,搜索就可以直接定位到代码。

调用堆栈

堆栈是一个数据结构,每一个函数调用时都会将函数的指针和参数值保存到堆栈中,后进先出,最后调用的函数最先出栈。

可以通过打断点,查看Chrome开发面板的sources的call stack,可以查看追溯到源代码的位置,这个特别适合console报错位置不明确的情况(比如报错指向vue.esm.js)。

分析代码

分析代码最常用的就是断点,一步步调试查看结果,定位问题。

断点

  1. 直接在代码里debugger

    在代码运行到该处就能触发断点,这对于sources面板不好找源码特别方便,麻烦之处就是需要记住去掉,不然后续开发经常会被断点。

  2. sources源码中加断点

    这种打断点非常方便,但有时候没那么容易找到源码。

  3. dom修改时加断点

  4. ajax请求断点

    1. 异常时断点

调试代码

调试代码,最好保持本地环境和线上环境一直,这样基本保证修改缺陷不会被测试验证不过。那怎么保持本地环境和线上保持一致呢。

  1. vue-cli的本地代理功能,在配置文件devServer.proxy中配置反向代理,这种方式最好弄一个网站作为中介代理,开发的时候只需要修改网站上的配置,本地服务不用重复启动。
  2. 自己搭建nginx反向代理,效果同上。
  3. 后端接口设置Access-Control-Allow-Origin,利用cors跨域本地直接访问线上数据,这种方法最方便,但需要后端同事配合。
  4. 使用fiddler AutoResponder功能,直接把服务器重定向到本地目录(需要编写一个正则表达式),修改本地文件刷新浏览器就能看的修改效果。
  5. 使用Chrome DevTools的Overrides功能,把服务器的文件映射到本地,可以支持在sources面板中修改方法直接生效,这种最适合调试jsp这种不用webpack压缩的老项目。

调试技巧(不断更新中)

try catch

最近工作中遇到一个问题,在使用的try catch的逻辑中,报错了,但浏览器报错指出了报错的位置,但没有给出具体的原因,这行的逻辑是指向了另外一个文件的函数,就是整条逻辑链比较长,后面定位问题花了很长时间,后面我在思考这是try catch的原因还是我自己写法的原因。

js是单线程的,报错会导致后续的语句阻塞,try catch主要的用途就是规避一些未知的错误,防止语句阻塞。使用try catch是没有问题的,自己的写法应该也没有问题,就是定位问题的方式太单一,其实是可以使用上面提到的异常捕获来定位问题。

异常捕获之后,可以通过调用堆栈看到调用顺序,再顺藤摸瓜,而不是一直盯着报错的行进行验证。

顺便介绍一个Chrome新版本的一个调试功能,原本我们打印一般需要写在源码里写console.log,前面也讲到console.log会影响性能,除了可以用webpack在生产环境的时候去掉console.log,新版本的Chrome还提供了一个更加方便的打印方法。

这样就不用在源码里面添加console.log语句了。

本文由博客一文多发平台 OpenWrite 发布!