命令
控制台命令可以快速获取调试所需信息,减少寻找的工作
$_
"$_"代表上一次表达式的值
在控制台输入
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 断点
在抛出捕获或未捕获的异常的代码行上暂停