kano个人博客:Chrome中的JS调试方法

kano个人技术博客 web前端开发 1,292 次浏览 没有评论

做技术开发让代码写一次就完美跑起来基本上是不可能的事情,我们的大脑能力有限,所以写代码总是需要不断的修改、调试、测试才能让程序逐渐完善。最传统的方式自然是打印输出,通过简单的打印可以解决大部分的问题,但是面对复杂的逻辑,冗长的函数还是会让我们望而却步,这时候如果借助一些更高级的调试工具,则会让调试工作事半功倍。

kano个人博客js调试

chrome是一款非常优秀的浏览器,最初的出现时就以速度闻名天下,而后发展迅速占领了大块的浏览器市场,并在2016年打败IE正式成为了市场占有率最高的浏览器。chrome的速度和众多的插件和快速迭代是其特点,不过本篇文章kano主要是讲解是如何用它来调试js代码的。

一、设置断点

这是调试代码的一个基础操作,在你不了解代码逻辑的地方打上断点,然后通过步进等操作可以清晰的看到代码的逻辑,其中变量的值的变化等,在chrome中打断点的方式如下:

1. 方法一

控制台

F12打开控制台,点击Sources选项,可以看到左边列出了项目的文件结构,点击你想调试的页面。

设置步骤

点击想要调试的行号,刷新页面。

设置步骤

可以看到代码在运行到断点时停了下来,接下来我们F10步进运行几步。

代码运行断点

代码跳到了另一个函数中,把光标放在变量上,可以看到程序运行到这里为止变量的值。

2. 方法2

在代码中输入debugger:

this.get_website_list(function () {
  debugger;
  app.fullscreenLoading = false;
});

debugger

代码在运行至debugger停了下来,效果类似于在浏览器中直接设置断点。

二、设置断点的执行条件

程序有时候会很复杂,我们设置某个断点但实际上并不一定想每次运行到这个断点代码就停一次,而是想某种条件满足时才会停止,比如下列代码,我们想在i的值为30的时候停下来。

for (var i = 1; i < 100; i++) {
  if (i % 30 === 0) {
    console.log('整除30');
  } else {
    console.log('不能整除');
  }
}

可以在断点处右键,选择Edit breakpoint

设置步骤

输入i == 30

设置步骤

重新运行,可以看到程序第一次在断点处停下来时,i的值已经为30了

设置步骤

Edit breakpoint允许我们输入一个表达式,当表达式的结果为true的时候,断点才生效。

三、DOM元素设置断点

有时候,我们想监听一个元素的改变,但是并不清楚到底是哪里的js改变了它,这时候可以使用元素断点。

有这么一个元素,它在某种情况下会多出一个属性来:

DOM元素

DOM元素

上面的data-aa就是多出来的属性,我们想知道他是什么时候被添加的,可以在元素上右键,选择Break-on -> attribute modifications

DOM元素

运行代码,在属性被添加之前,就找到了改变元素属性代码所在的位置:

DOM元素

原来是通过一个叫做add_aa的函数添加的。

可以看到Break on菜单中有三个属性,意义分别如下:{

subtree modifications:子节点被修改

attribute modifications:元素自身属性被修改

node removal:元素自身被移除

}

dom断点对于调试第三方的代码十分有用,程序员经常会遇到的需求就是“稍微”修改一下别人的代码,但是第三方的代码经常没有注释,即使是很小的改动也要找很长时间,而善用DOM断点能节省大量的时间,这也是很多初学者不知道的一个功能。

以上就是kano个人技术博客对于chrome的js调试心得,断点调试对于简单的console.log来说略显复杂,但是对于复杂的程序调试却很有用。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Go