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

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

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

具体的使用方法：

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

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

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

赞 (0)

相关推荐

  • Chrome调试折腾记之JS断点调试技巧

    Chrome调试折腾记之JS断点调试技巧

    JS调试技巧技巧 一:格式化压缩代码 技巧二:快速跳转到某个断点的位置 右侧的Breakpoints会汇总你在JS文件所有打过的断点,点击跟checkbox同一行的会暂时取消这个断点,若是点击checkbox下一行的会直接跳转到该断点的位置 技巧三:查看断点内部的作用范围[很实用] 右侧的scope可以看到相当多实用的信息,比如this的指向,是否有值,断点是对象还是其他等.. 技巧4:监听事件断点 右侧的Event Listener Breakpoints可以选择性的监听某类行为事件,比如键盘

  • javascript断点调试心得分享

    javascript断点调试心得分享

    1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例) 步骤记住没? 用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下,OK!恭喜你的处女断点打上了,哈哈~~ 2.断点怎么打才合适? 打断点操作很简单,核心的

  • chrome浏览器如何断点调试异步加载的JS

    chrome浏览器如何断点调试异步加载的JS

    前言 在我们日常开发中,常常利用chrome强大的控制台Sources下面进行代码断点调试,但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到,那如何进行debug断点调试呢?下面来一起看看. 这是我们用Sources断点调试的实例图: 图中我们可以看到,在index.js中我们通过$.getScript引入test.js,看看表现如何: 我们在Network中看到test.js已经成功引入,但是它却属于XHR类请求,这样我们在Sources必然找不到它. 不出所料

  • 使用Firebug对js进行断点调试的图文方法

    使用Firebug对js进行断点调试的图文方法

    具体步骤: a. 打开Firebug后,启用"脚本"调试,找到引用的脚本文件(或者行内js): b. 在适当的位置加入断点: c. 如果断点已经执行过,则刷新页面,这时脚本就会在断点处中断.如果断点没有执行过,那可以直接执行页面上的动作(例如点击按钮等),然后代码会在断点处中断: d. 观察函数调用栈,观察local变量,也可以进行单步执行,进行调试. 确实非常简单!用Firebug断点调试的优点总结如下: 能加断点的行用绿色行号,非常直观: call stack用两种方式显示出来,很

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

    有的同学会说,可以使用源代码搜索的办法.的确,对于一个相对简单的页面,这个方法时常奏效.但是,对于构成相对复杂的页面(比如页面嵌入很多脚本文件和片段.使用了大段面向对象的实现.隐藏了实现的代码),可能找起来就不那么顺利了. 在Javascript调试中,我们经常会使用到断点调试.其实,在DOM结构的调试中,我们也可以使用断点方法,这就是DOM Breakpoint(DOM断点). 具体的使用方法: 1. 在Chrome浏览器中,打开开发者工具,先选中一个页面元素,然后点击鼠标右键,依次点击菜单中

  • JavaScript实现获取dom中class的方法

    本文实例讲述了JavaScript实现获取dom中class的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function getClass(node,classname) { if(node.getEle

  • JavaScript必备的断点调试技巧总结（推荐）

    JavaScript必备的断点调试技巧总结（推荐）

    目录 为什么要使用 debugger Chrome debugger 基本用法 VS Code 调试 SPA 应用 Chrome 调试 Nodejs 使用 VS Code 调试 Nodejs Conditional Breakpoint 条件断点 总结 为什么要使用 debugger 这篇文章将介绍如何使用断点来进行 JavaScript 调试.在读这篇文章之前,需要问一个问题:为什么要使用断点来进行调试? 我们需要了解使用断点的必要性,否则下文介绍的所有断点调试方法都会是废话.console.

  • JavaScrip调试技巧之断点调试

    JavaScrip调试技巧之断点调试

    首先,在各个浏览器中,断点调试支持的最好的当然是Firefox,Firefox不仅可以使用Firebug调试页面js脚本,还可以用高级调试工具例如JavaScript Debugger (Venkman) 来调试Firefox扩展里的js.除此之外,Firefox还支持一些更为高级的断点调试.变量监视功能. 其他浏览器里,Opera.Chrome和Safari的调试功能也比较好用.Opera的DragonFly速度相对比较快,界面清爽,功能强大,但不如Safari等友好.相比来说,IE8的程序员

  • JavaScript语法约定和程序调试原理解析

    JavaScript 语法约定 1.大小写的区分 1). JavaScript的关键字,永远都是小写的: 2). 内置对象,如Math和Date是以大写字母开头的: 3). 对象的名称通常是小写:若是多个单词,驼峰(Camel)命名法. 驼峰(Camel)命名法:开头单词小写,后面单词首字母大写.使用的很普遍,很多人习惯这种命名方法.示例:userName. 2.变量.对象和函数的名称命名 当声明变量.对象和函数的名称时大小写,数字,下划线,美元符号都可以,但是必须以字母,下划线,美元符号开头.

  • 详解使用Visual Studio Code对Node.js进行断点调试

    详解使用Visual Studio Code对Node.js进行断点调试

    在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 打开Chrome开发者工具: 点击进入Sources标签页,在页面的左侧就能看到JS代码的目录: 找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source

  • pycharm 使用心得（五）断点调试

    pycharm 使用心得（五）断点调试

    [运行]和[调试]前的设置,详见前面的文章,helloword. 1,设置断点 在代码前面,行号的后面,鼠标单击,就可以设置断点.如下: 2,调试 断点点击那个绿色的甲虫图标(似乎甲虫已经成为debug专用图标了),进行断点调试. 点击后,会运行到第一个断点.会显示该断点之前的变量信息. 点击Step Over 或者按F8,我们继续往下运行,到下一个断点: 补充: 断点的其他操作,和功能,大家可以把鼠标移到相应的按钮上,看一下,试试便知.如下: 总结: 这就是PyCharm的断点功能,还是很简单

随机推荐