前端开发高级调试技巧

使用Chrome控制台调试前端代码

Posted by wang chong on March 17, 2019

断点以及捕获事件的绑定

断点

断点代码调试方式在编辑器中也可以调试,本次采用Chrome控制台调试。首先打开我们要调试的网站,按F12会弹出浏览器控制台或者右键点击打开审查元素,会看到这样一个界面。 最上面一层是导航,其中第三个就是存放源代码的地方。打开 然后寻找到所要调试的文件,例如我们找到index。 点击代码左边这一排数字,就可以对每一行代码打上断点。

可以看到打上断点可以在右边栏中的Breakpoints中标记出来。然后按下F5刷新。 此时网站就进入了调试状态。 右上角的这些按钮可以控制调试的进行。

Call Stack表示此时代码运行在什么环境下(全局还是局部)

Scope表示此时的作用域。

寻找事件监听

这种方式可以找到指定元素绑定的事件。

上面选中了button,会弹出有关button的相关属性 点击Event LIsteners,可以查看这个元素绑定了哪些事件

DOM元素断点

DOM元素也是可以打断点的,在Elements里面找到指定的DOM元素,右键点击选择Break on可以设置DOM元素断点。 打过断点之后会有一个蓝色的小点点。

DOM元素断点的方式有三种:

  • node removal — DOM元素移除
  • attribute modifications — DOM元素的attribute 改变
  • subtree modifications — DOM的子树改变