粥里有勺糖

Appearance

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 ​

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

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

图片

monitorEvents ​

事件监控

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

图片

window.console ​

图片

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

assert ​

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

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

图片

table ​

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

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

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

console.table(location)

图片

图片

time与timeEnd ​

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

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

图片

dir ​

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

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

图片

log添加样式 ​

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

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

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

图片

实时表达式 ​

图片

图片