前端调试入门

前端调试，其实狭义上讲主要指通过 Chrome Devtool 进行前端 JS 代码的调试。

有什么好处？

学会前端调试，可以很好地提高开发能力，个人感受最深的有以下几点：

1. 可以帮助快速定位问题，提高开发效率；
2. 可以帮助阅读和理解代码；
3. 可以帮助在开发过程中进行高效自测。

如何快速入门？

1. 认识常用面板。对于调试来说，Source 面板最需要首先掌握。
2. 学会一些常用调试技巧。

Source 面板

Source 面板就是用来查看页面资源和调试 JS 代码的面板。

不需要专门框出来其实我们也能看出来面板分为三个部分：（其实主要是我框不好又有强迫症）

1. File Navigator 窗格。列出了页面请求的每个文件。
2. Code Editor 窗格。显示选中的文件内容，可以打断点来暂停代码，甚至可以直接在上面修改代码。
3. JavaScript Debugging 窗格。调试过程中的信息和工具，查看调用栈，当前作用域的变量等。

单步调试

学会断点，就可以一步步执行代码，并观察每个数据的变化情况，而无须到处使用 console.log() 语句，是不是方便很多。习惯使用断点而不是 console.log() 可以帮助你更高效地定位和修改bug。当然并不是说不能用 console.log()，但不应让其充斥你的代码。

1. 打断点

只需要点击想要暂停的代码对应行号即可。可打多个断点，可给断点设置条件...

2. 单步调试

单步调试即逐行去运行调试代码，需要学会单步调试的一些常用图标按钮。

图标按钮	操作	描述
	Resume	继续执行直到下一个断点。如果没有遇到断点，则继续正常执行。
	Step Over	执行并跳转到下一行（即使执行的为函数调用，也一并执行完而不跳进函数里单步执行）。
	Step Into	如果下一行包含一个函数调用，Step Into 将跳转并在其第一行暂停该函数。
	Step Out	函数调用后，执行当前函数剩余部分，然后在下一个语句暂停。
	Step
	Deactivate Breakpoints	暂时停用所有断点。用于继续完整执行，不会真正移除断点。再次点击以重新激活断点。
	Pause on Exceptions	在发生异常时，自动暂停执行代码。

一些调试技巧

如何快速找到想要调试的文件和地方？

如果文件都找不到，那么调试也无从谈起。知道这几个快捷键可以帮助我们快速找到想要调试的文件和地方。

• 找文件 ctrl + p

  这是一个全局搜索文件的快捷键，只要知道文件名，就能快速找到文件。

  

• 搜索 ctrl + f

  这个太常用了，基本上知道这两个快捷键即可快速定位来打断点。

• 找函数 ctrl + shift + o

  这个对我来说不算常用，因为很多时候 ctrl + f 已经满足需求。但如果习惯用，有时候也能比 ctrl + f 更方便。

  

• 具体到某行某列 ctrl + g

  通常报异常会显示在某行，这个时候定位到行就是最直接的方式了。格式如：:row:column

  

如何调试被压缩丑化的代码？

通过点击 Pretty print 可以将压缩的代码进行格式化，方便阅读和打断点调试。

如果对于这种代码你也能够熟练调试，那么调试能力就已经很到位了。

如何让断点在某种条件下才停住呢？

如果需要调试一个循环体，很容易在循环体内跳半天还没跳到自己想要验证的条件，这样的调试效率是很低的，通过设置条件断点就可以解决。

有两种方式可以设置条件断点：

1. 直接右键行号，选择 Add condition breakpoint...

   

2. 在已设置的断点上右键，选择 Edit breakpoint

   

然后设置条件，之后运行时就会直到满足该条件才停住。