阅读 31

chrome常用调试常用技巧

1. console 控制台中 $0 的使用

在控制台中,获取选中的元素,

  • 常规js操作: document.getElementById 等操作来获取元素;

  • chrome中的操作:$0 即可获取到选中的元素;$1 可获取到上一次选中的元素

2. 打DOM断点,右击某个DOM元素,选择break_on 可针对DOM的不同操作进行打断点

  1. subtree modifications: 字节点改变时,进入断点
  2. attribute modifications: 节点属性变化时,在属性改变时,进入断点
  3. node removal:节点移除时,进入断点

3. 在 $.cache 中获取元素的信息

  • 先找到元素在$.cache数组中的位置即下标

在element面板中,找到 properties面板,找到该元素;展开后,找到jQueryXXXXXXX(jq后面跟一串数字)的value值就是该元素在$.cache中的位置值

通过cache可以获取到元素的有关的data, events及handle信息;events中放的是该元素上绑定的事件 右击事件,可以选择跳转到事件声明的位置

4. Sources 面板的使用

  1. 断点进行步骤:运行到下一个断点;跳到下一行代码; 如果该行有调用方法的代码,则进入到方法所在的代码,没有的话跳到下一行;跳出当前方法所以在的方法方法体;一步一步执行;禁用断点

  2. watch: 观察调试过程中,代码中变量的变化

  3. breakpoints: 断点集合

  4. scope:当前断点所在的 作用域

  5. call stack: 调用栈;执行到断点时,所有的方法调用栈,可以追溯是谁调用了当前断点所在的方法;

  6. Event Listener Breakpoints : 能够打事件监听断点;如果不知到点击时,调用了哪些方法,可以勾选此处的mouse/click ,这样在点击的时候,就会进入click断点

5. 条件断点: 当满足条件时,才会在断点处停住

  1. 可以写让断点停住的满足条件
文章分类
前端
文章标签