谷歌浏览器调试JavaScript代码

谷歌浏览器调试JavaScript代码

由于在前端是一个弱类型语言，虽然现在增加了ESLint，Flow等静态检查，但是这些检查工具只能帮你检查出一些代码的显式问题，很多隐藏的逻辑性问题我们只能通过console去输出，但是有些时候打印出来的结果不尽人意，于是，我便找阿里的前辈学习了如何使用debugger去调试代码

如下代码

function a () {
  let i = 1;
  i++;
  i++;
}

我们需要让它每次加一的时候直接看到i的变化，通常我们选择在每次改变的时候在控制台输出：

function a () {
  let i = 1;
  i++;
  console.log(i); // 2
  i++;
  console.log(i); // 3
}

这样的话，我们每次就可以看到i的变化了

但是，今天我准备用一件神器：debugger

​

function a () {
  debugger;
  let i = 1;
  i++;
  i++;
}

debugger其实就是在你的程序里打上一个断点（类似于Java里的断点调试），程序运行到这里的时候，会卡在这里，除非你运用命令（下一步、跳过）去继续执行代码，废话不多话，我们来看一下效果。

当程序执行到这里时，会在上面中央的部分出现一个黄框，暂停在debugger，这时候我们打开谷歌浏览器的开发工具，点击右边菜单栏的sources界面，就可以看到我们的代码了。

跳过debugger执行的快捷键是F8，或者按一下黄框里面的三角

一步一步执行的快捷键是F10，或者按一下黄框里面的箭头

这个时候，注意看你的Sources框，代码执行到了下一行了

让我们打开一些工具窗口

在Sources的正下方，有一个debugger窗口，你可以在里面找到你调试代码里的变量

接着继续按F10，你就可以看到i的值根据你的代码发生了变化

这样的话，我们就可以知道在哪一步我们的代码发生了哪些对于的变化，希望这个可以让你的代码调试如虎添翼

最后加一个小彩蛋，当你的代码遇到异常报错的时候，浏览器开发工具自动捕获到，然后开启断点模式，只需要简单的一步，开启开发者工具中的异常捕获就好了

蓝色为开启状态

喜欢就点个赞吧～