Chrome 调试技巧-Console

控制台面板是使用频率最高的面板之一,这篇摘抄一些实用性高的内容

$

$number

$0 是对我们当前在 Element面板 中选中的 html 节点的引用

$1 是对上一次我们选择的节点的引用， $2 是对在那之前选择的节点的引用以此类推,直到 $4

$与$$

$ 等价于 document.querySelector()
$$ 等价于 document.querySelectorAll()

$_

上次打印结果的引用

直接await

大多数异步API 都会返回Promise,需要.then才能拿到结果

在console面板中可以直接await 不需要 async 包裹

条件断点

TODO: 添加一个合适的示例

source面板中选择文件,右击行号，选择 Add conditional breakpoint 添加代码

Custom Formatter

自定义输出对象的函数

TODO: 补充实用例子

queryObjects

TODO: 补充实用例子

monitor

用于监控函数的入参,自动打印函数名与入参

function sum(a,b){
  return a+b
}
monitor(sum)

monitorEvents

事件监控

monitorEvents(window,['click','resize'])

window.console

除了常用的console.log外其它实用的方法

assert

当第一个参数为 false 时， console.assert 打印跟在这个参数后面的值

console.assert(100==='100','no equal')
console.assert(100=='100','yes')

table

可以将数组 (或者是类数组的对象)打印成一个漂亮的表格

第二个参数指定要展示的列

console.table(document.querySelectorAll('a'),['textContent','href'])

console.table(location)

time与timeEnd

两个方法配合计算并打印时间戳,用处用于测试方法的执行时间

console.time('a')
setTimeout(console.timeEnd,1000,'a')

dir

可以用于查看某个dom的属性

console.log(document.body)
console.dir(document.body)

log添加样式

给打印文本加上 %c ,%c后面的内容就会被样式参数所影响

console.log 除第一个参数外的参数都是css规则

console.log("%cred","color:red;")
console.log("%cred%cblue","color:red;","color:blue")

Chrome 调试技巧-Console ​

$ ​

$number ​

$与$$ ​

$_ ​

直接await ​

条件断点 ​

Custom Formatter ​

queryObjects ​

monitor ​

monitorEvents ​

window.console ​

assert ​

table ​

time与timeEnd ​

dir ​

log添加样式 ​

实时表达式 ​