【干货】前端进阶应该知道的这些调试方法

前言

平时工作量大并且很忙，也就意味着难免会在写代码的时候一不小心写出BUG。如果测试一旦没有测到，代码上到现网往往就是事故，很多同学在这种时候手忙脚乱，不知道怎么调试解决。本文就这点主要讲一下平时前端调试用的那些方法，希望能够给到大家帮助。

遇到了BUG怎么办？

如果你还是个前端小白，你最常用的调试方法应该是直接在代码中写下一个 log，例如：

console.log('调试信息，输出：', test)

方法虽然简单粗暴，但是它是实用且简单的。然而，如果 BUG 十分复杂，涉及到跨组件甚至是源码，采用打 log 的方式就变得十分麻烦了；
而比较有经验的同学在遇到复杂问题的时候可能会采取以下方法来定位、调试：

• 打断点
• charles 抓包

看不出来问题，我们来打个断点吧~

遇到 BUG，通常我们第一直觉是打开控制台，点开看一下 Console

通常，如果存在报错，我们可以直接点进去到源码处直接打断点

当然，这里只是做简单的示例，实际情况更加复杂的时候，右边的堆栈可以让你看到调用顺序，沿着调用堆栈一般也能找到问题所在。

如果打断点还是找不到问题，我们可以 review 代码并思考以下问题：

• 接口数据是否存在异常
• 代码是否已提交到现网环境

如果是接口数据异常