chrome 调试技巧

345 阅读1分钟

命令

控制台命令可以快速获取调试所需信息,减少寻找的工作

$_

"$_"代表上一次表达式的值

在控制台输入

1+2;

此时$_代表3

$0 - $4(快速获取元素)

代表inspect最近选中的5个dom对象,$0代表最近一次选中的dom。一般用于调试时快速获取元素。

使用方式: 点击元素,在控制台输入$0

“$(selector)”

chrome 的控制台自带$,没有其它第三方库的情况下

$ == document.querySelector
? == document.querySelectorAll

debug(function)

指定的函数被执行会进断点(当前作用域)

解绑:undebug

function test(){
    console.log('test');
}

debug(test)

inspect(function/object)

查找函数(当前作用域)

function test(){
    console.log('test');
}

inspect(test)

查找对象(比如dom对象)

inspect(document.body)

monitorEvents(object[, events])

监听对象的事件

monitorEvents(window,"resize");  // 监听resize

monitorEvents(window, ["resize", "scroll"])  // 监听多个事件

解绑:unmonitorEvents

getEventListeners(object)

获取object的所有事件listeners,配合“show function definition”可快速定位源码

调试面板

调试面板快速断点可以帮助我们快速获取调用栈

DOM断点

  • Subtree modifications (子节点修改时触发)
  • Attributes modifications (节点属性变化时触发)
  • Node Removal (删除节点时触发)

XHR断点

  • 不填值(拦截所有ajax请求)
  • 填值(拦截包含字符串的请求)

Event listener 断点

拦截相应的事件

Exception 断点

在抛出捕获或未捕获的异常的代码行上暂停