如何调试前端代码？

调试一直是程序员很重要的一项技能，它可以追踪变量在某个阶段的值，从而使得程序员能够知道在什么地方出现了错误。我之前知道后端调试，但是不知道前端调试，前端调试是最近学习的，所以写一篇文章来总结一下。其实前端调试用的最多的就是打印某个变量的值，以及在程序中打断点，接下来我一一介绍。

console.log(变量)

一般情况下，我们都是用console.log(变量)来查看变量的值，就像下图一样。

比如我想看看response到底接没接收到后端传回来的数据，那我就打印一下看看咯。假如接收到了，把后端传回来的数据的list拿出来放到records中，我想看看到底records到底有没有list的数据，就打印一下看看咯。打印在哪里看呢？就是在图片的这个地方，有一个控制台，那里就可以看到打印的效果了。

console.log方法用于在控制台输出信息。它可以接受一个或多个参数，将它们连接起来输出。一般情况下，我们在写代码的时候，想看看某个变量的值，就可以使用这个方法。这个方法还是挺好用的，如果你不会这个方法，那基本上如果碰到某个变量的值你不知道，那你不知道这个方法，那你就不懂了。

debugger 语句

debugger语句的作用是设置断点，程序运行到debugger语句时会自动停下（但前提是你要以调试模式运行才行）。Chrome 浏览器中，当代码运行到debugger语句时，就会暂停运行，自动打开脚本源码界面。

for(var i = 0; i < 5; i++){
  console.log(i);
  if (i === 2) debugger;
}

上面代码打印出0，1，2以后，就会暂停，自动打开源码界面，等待进一步处理。

这其实就是和后端的调试一模一样，只不过后端是打断点，前端是写一个debugger语句而已，其实没什么区别。不过说实话，你自己写一个debugger语句确实比打断点要麻烦一点。