欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

谷歌浏览器调试JavaScript代码

程序员文章站 2022-04-25 10:44:03
...

谷歌浏览器调试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里的断点调试),程序运行到这里的时候,会卡在这里,除非你运用命令(下一步、跳过)去继续执行代码,废话不多话,我们来看一下效果。

谷歌浏览器调试JavaScript代码

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

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

谷歌浏览器调试JavaScript代码

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

谷歌浏览器调试JavaScript代码

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

谷歌浏览器调试JavaScript代码

让我们打开一些工具窗口

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

谷歌浏览器调试JavaScript代码

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

谷歌浏览器调试JavaScript代码

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

 

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

谷歌浏览器调试JavaScript代码

 

蓝色为开启状态

 

喜欢就点个赞吧~