# 前端调试方法
#### 查看console.log
通常遇到BUG，第一直觉肯定看console的报错信息，这种报错，错误原因和报错位置一目了然，很方便就定位到出问题的代码，console.log简单实用，简单的缺陷还是可以通过这种方法定位的，生产环境利用webpack去掉，就不会影响性能方面。
图1console报错   
![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000001790484641.png "点击放大")
#### 全局查找
可以根据报错关键字定位问题，一般是dom元素的id、class、name或者页面中出现的唯一性的中文汉字，搜索就可以直接定位到代码。
#### 调用堆栈
堆栈是一个数据结构，每一个函数调用时都会将函数的指针和参数值保存到堆栈中，后进先出，最后调用的函数最先出栈。
可以通过打断点，查看Chrome开发面板的sources的call stack，可以查看追溯到源代码的位置，这个特别适合console报错位置不明确的情况（比如报错指向vue.esm.js）。
图2代码追溯   
![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000001784780041.png "点击放大")
#### 分析代码
分析代码最常用的就是断点，一步步调试查看结果，定位问题。
#### 断点
1. 直接在代码里Debugger。 在代码运行到该处就能触发断点，这对于Sources面板来说不容易寻找源码中的断点。
   
2. Sources源码中加断点。 这种打断点非常方便，但有时候没那么容易找到源码。
   
3. Dom修改时加断点。
   图3Dom断点   
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000001748014786.png "点击放大") 
4. Ajax请求断点。
   图4Ajax断点   
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000001747855910.png "点击放大") 
5. 异常时断点。
   图5异常断点   
   ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000001794775657.png "点击放大") 
 
#### 调试代码
调试代码最好保持本地环境和线上环境一致，这样基本保证修改缺陷不会被测试验证不通过。那怎么保持本地环境和线上保持一致呢？
1. Vue CLI的本地代理功能，在配置文件devServer.proxy中配置反向代理，这种方式最好弄一个网站作为中介代理，开发的时候只需要修改网站上的配置，本地服务不用重复启动。
2. 自己搭建Nginx反向代理，效果同上。
3. 后端接口设置Access-Control-Allow-Origin，利用cors跨域本地直接访问线上数据，这种方法最方便，但需要后端同事配合。
4. 使用Fiddler AutoResponder功能，直接把服务器重定向到本地目录（需要编写一个正则表达式），修改本地文件刷新浏览器就能看的修改效果。
5. 使用Chrome DevTools的Overrides功能，把服务器的文件映射到本地，可以直接在sources面板中修改文件中的方法，这种最适合调试jsp这种不用webpack压缩的老项目。