更新时间：2024-09-23 GMT+08:00
前端调试方法
查看console.log
通常遇到BUG，第一直觉肯定看console的报错信息，这种报错，错误原因和报错位置一目了然，很方便就定位到出问题的代码，console.log简单实用，简单的缺陷还是可以通过这种方法定位的，生产环境利用webpack去掉，就不会影响性能方面。
图1 console报错
全局查找
可以根据报错关键字定位问题，一般是dom元素的id、class、name或者页面中出现的唯一性的中文汉字，搜索就可以直接定位到代码。
调用堆栈
堆栈是一个数据结构，每一个函数调用时都会将函数的指针和参数值保存到堆栈中，后进先出，最后调用的函数最先出栈。
可以通过打断点，查看Chrome开发面板的sources的call stack，可以查看追溯到源代码的位置，这个特别适合console报错位置不明确的情况（比如报错指向vue.esm.js）。
图2 代码追溯
分析代码
分析代码最常用的就是断点，一步步调试查看结果，定位问题。
断点
调试代码
调试代码最好保持本地环境和线上环境一致，这样基本保证修改缺陷不会被测试验证不通过。那怎么保持本地环境和线上保持一致呢？
- Vue CLI的本地代理功能，在配置文件devServer.proxy中配置反向代理，这种方式最好弄一个网站作为中介代理，开发的时候只需要修改网站上的配置，本地服务不用重复启动。
- 自己搭建Nginx反向代理，效果同上。
- 后端接口设置Access-Control-Allow-Origin，利用cors跨域本地直接访问线上数据，这种方法最方便，但需要后端同事配合。
- 使用Fiddler AutoResponder功能，直接把服务器重定向到本地目录（需要编写一个正则表达式），修改本地文件刷新浏览器就能看的修改效果。
- 使用Chrome DevTools的Overrides功能，把服务器的文件映射到本地，可以直接在sources面板中修改文件中的方法，这种最适合调试jsp这种不用webpack压缩的老项目。
父主题： 常用调试方法
