javascript调试之DOM断点调试法使用技巧分享


Posted in Javascript onApril 15, 2014

有的同学会说,可以使用源代码搜索的办法。的确,对于一个相对简单的页面,这个方法时常奏效。但是,对于构成相对复杂的页面(比如页面嵌入很多脚本文件和片段、使用了大段面向对象的实现、隐藏了实现的代码),可能找起来就不那么顺利了。

在Javascript调试中,我们经常会使用到断点调试。其实,在DOM结构的调试中,我们也可以使用断点方法,这就是DOM Breakpoint(DOM断点)。

具体的使用方法:

1. 在Chrome浏览器中,打开开发者工具,先选中一个页面元素,然后点击鼠标右键,依次点击菜单中的”Break on …”——勾选“Attributes modifications”。刷新页面,当该元素的属性发生变化时,就会暂停脚本的执行,并且定位到改变发生的地方。

2. 在安装了firebug 的Firefox 浏览器中,打开firebug,切换到“HTML”选项卡,选中需要监视的DOM元素,鼠标右键,勾选菜单中的“在属性改变时中断”。这样就成功添加了一个HTML 断点。刷新页面后,firebug 也会帮助我们定位到更改该元素属性的代码。

除了可以监视DOM元素本身的属性变化,Chrome 和 Firebug 还可以监视其子元素的变化,以及何时元素被删除。

Javascript 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
javascript页面渲染速度测试脚本分享
Apr 15 #Javascript
JS实现静止元素自动移动示例
Apr 14 #Javascript
js 获取元素下面所有li的两种方法
Apr 14 #Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 #Javascript
jquery使用jxl插件导出excel示例
Apr 14 #Javascript
js 获取input点选按钮的值的方法
Apr 14 #Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 #Javascript
You might like
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
php设计模式之委托模式
2016/02/13 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
简单的php购物车代码
2020/06/05 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
Python如何生成树形图案
2018/01/03 Python
Python os.access()用法实例
2019/02/18 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
员工入职担保书范文
2014/04/01 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
2014年质检工作总结
2014/11/26 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
react中的DOM操作实现
2021/06/30 Javascript
Python Matplotlib库实现画局部图
2021/11/17 Python