javascript调试之DOM断点调试法使用技巧分享
更新时间：2014年04月15日 08:37:11 作者：
在开发中，偶尔会遇到类似这样的问题：页面上的一个DOM元素被改了属性，但是我们却不知道是哪个脚本更改的
有的同学会说，可以使用源代码搜索的办法。的确，对于一个相对简单的页面，这个方法时常奏效。但是，对于构成相对复杂的页面(比如页面嵌入很多脚本文件和片段、使用了大段面向对象的实现、隐藏了实现的代码)，可能找起来就不那么顺利了。
在Javascript调试中，我们经常会使用到断点调试。其实，在DOM结构的调试中，我们也可以使用断点方法，这就是DOM Breakpoint（DOM断点）。
具体的使用方法：
1. 在Chrome浏览器中，打开开发者工具，先选中一个页面元素，然后点击鼠标右键，依次点击菜单中的”Break on …”——勾选“Attributes modifications”。刷新页面，当该元素的属性发生变化时，就会暂停脚本的执行，并且定位到改变发生的地方。
2. 在安装了firebug 的Firefox 浏览器中，打开firebug，切换到“HTML”选项卡，选中需要监视的DOM元素，鼠标右键，勾选菜单中的“在属性改变时中断”。这样就成功添加了一个HTML 断点。刷新页面后，firebug 也会帮助我们定位到更改该元素属性的代码。
除了可以监视DOM元素本身的属性变化，Chrome 和 Firebug 还可以监视其子元素的变化，以及何时元素被删除。
相关文章
这篇文章主要介绍了ES6实现的遍历目录函数,涉及ES6文件目录的遍历、读取、回调函数及json相关操作技巧,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了15个非常实用的JavaScript代码片段，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
DOM元素都有一些标准事件，一般使用时只要使用onclick=function的方式就可以了，但是当需要为DOM元素添加多个事件，删除事件，或在用Javascript封装控件的时候，为封装的控件添加自定义事件的时候2012-05-05
最丑的时钟效果，这篇文章主要为大家详细介绍了js canvas时钟制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家介绍了H5如何实现唤起APP及调试bug解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了TypeScript常见类型及应用示例讲解，本章我们会讲解 JavaScript 中最常见的一些类型，以及对应的描述方式，有需要的朋友可以借鉴参考下2022-02-02
这篇文章主要详细介绍了javascript 闭包的相关资料，十分详尽,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了JS+H5 Canvas实现时钟效果，利用JavaScript和Canvas实现简单时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
最近面试有道题是至少写出 15 个数组方法，数组方法平时经常用到的也就6-7个，突然要一下子写出15个，还是有点卡壳了，今天整理一波，需要的可以参考一下2022-05-05
这篇文章主要为大家详细介绍了JS实现随机点名系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
最新评论