Chrome基本JS调试

前言

Chrome 算是开发者用的最多的工具了。而其中的控制台更是调试JS的利器，今天就学习一下基本的控制台的JS调试。

基本调试会话

console.assert(expression,object)

当expression = false时写入打印出object

console.clear()

清除控制台内容

要是Preserve log 被勾选则无效

console.count(label)

完全相同的语句被提供给同一行的count()时，被计数。

console.time(label)

启动一个计时器,可传递一个字符串便于标记命名，调用console.timeEnd()来停止计时器。

可用Timeline面板来进行性能分析

console.debug(object,[object,···])

与console.log()相同

console.dir(object)

输出object的JS表示形式

console.dirxml(object)

输出object的xml形式

console 记录

• console.log()基本记录
• console.info() 基本记录,有和小标记
• console.error()记录并有明显标记
• console.warn()基本并有明显标记
• console.group(label)/console.groupEnd()记录组,便于多处调试

记录组内还可以嵌套记录组,groupEnd会结束最近的记录组。

log()里面可以用格式说明符来代替

console.profile([label])

配置文件写入Profiles面板中,以profileEnd()结束

控制台命令

主要就是选择和检查DOM元素

$_

返回最近评估的表达式的值

$0-$4

检查最后五个DOM元素

$(selector)

返回带指定CSS的第一个DOM

$$(selector)

返回与CSS匹配的元素组

clear()

清空控制台

copy(object)

指定字符串形式复制到剪贴板

debug(function)

调试指定函数,自动切至Source面板,undebug(fn)停止函数中断

getEventListeners(object)

返回对象上注册的事件监听器

keys(object)

返回对象的属性名数组

values(object)

返回对象属性值的数组

monitor(funciton)

监视某函数，打印出函数的参数。使用unmonitor(function)停止

table(data[,columns])

表格格式的对象数据