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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
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初学者(入门学习经验谈)
2010/10/12 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
PHP防盗链代码实例
2014/08/27 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
Javascript之String对象详解
2016/06/08 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
土木工程应届生自荐信
2013/09/24 职场文书
公司成立感言
2014/01/11 职场文书
万年牢教学反思
2014/02/15 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL