谷歌浏览器调试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里的断点调试),程序运行到这里的时候,会卡在这里,除非你运用命令(下一步、跳过)去继续执行代码,废话不多话,我们来看一下效果。
当程序执行到这里时,会在上面*的部分出现一个黄框,暂停在debugger,这时候我们打开谷歌浏览器的开发工具,点击右边菜单栏的sources界面,就可以看到我们的代码了。
跳过debugger执行的快捷键是F8,或者按一下黄框里面的三角
一步一步执行的快捷键是F10,或者按一下黄框里面的箭头
这个时候,注意看你的Sources框,代码执行到了下一行了
让我们打开一些工具窗口
在Sources的正下方,有一个debugger窗口,你可以在里面找到你调试代码里的变量
接着继续按F10,你就可以看到i的值根据你的代码发生了变化
这样的话,我们就可以知道在哪一步我们的代码发生了哪些对于的变化,希望这个可以让你的代码调试如虎添翼
最后加一个小彩蛋,当你的代码遇到异常报错的时候,浏览器开发工具自动捕获到,然后开启断点模式,只需要简单的一步,开启开发者工具中的异常捕获就好了
蓝色为开启状态
喜欢就点个赞吧~
推荐阅读
-
chorme谷歌浏览器安装失败错误代码:0X800040怎么解决
-
IE浏览器中怎么调试JavaScript程序?
-
如何使用谷歌浏览器自带的调试工具?chrome自带调试工具使用方法实例
-
利用ChromeCROSS可以在chrome浏览器上调试跨域代码
-
谷歌浏览器怎么调试js?谷歌浏览器调试javascript教程图文详解
-
JavaScript实现浏览器网页自动滚动并点击的示例代码
-
JavaScript判断窗口是否最小化的代码(跨浏览器)
-
Linux(ubuntu) 三行代码搞定安装谷歌浏览器
-
JS使用Chrome浏览器实现调试线上代码
-
【代码笔记】Web-JavaScript-JavaScript调试