Chrome调试骚操作

看了掘金小册的Chrome 调试技巧篇章，受益匪浅，特总结如下，希望能够帮助到大家?

element

1. 截屏新姿势（实用指数：?????）
操作：command + shift + P，输入screen后

• 全屏截图：选择Capture full size screenshot
• 节点截图：选择Capture node screenshot（得事先选中截图内容所对应的dom）
  
  then，就直接下载了

2. 控制台主题切换（实用指数：??）
操作：command + shift + P，输入theme后，选择Switch to light theme（或Switch to dark theme）

console

1. copy（实用指数：??）
实现控制台快速复制功能

2. $0（实用指数：??）
在Elements 面板中， $0 是对我们当前选中的 html 节点的引用，$1 ($2,$3,$4)对应上一次(上上次，上上上次，…)选中节点的引用

3. $_（实用指数：???）
对上次执行结果的引用

4. console.assert()（实用指数：???）
当我们传入的第一个参数为 假 时，console.assert 打印跟在这个参数后面的值。可以用来替换繁琐的if

5. console.log()升级版（实用指数：????）
当console.log()想一次打印多个数据时，会混乱

var dog = '小刀'
var cat = '小咪'
var rabbit = '小白'
var tiger = '花花'
var monkey = '皮皮'
console.log(dog, cat, rabbit, tiger, monkey)
console.log({dog, cat, rabbit, tiger, monkey})

可以选择打印一个对象

6. console.dir()（实用指数：???）
打印dom节点，节点所关联到的真实的js对象

7. console.time() && console.timeEnd()（实用指数：???）
这两个是成对出现的
如果我们想知道一段代码的执行时间，分析函数的性能，可以使用console.time()开始计时，console.timeEnd()来结束计时，控制台就会打印出它们的时间差。

8. console.count()（实用指数：???）
当我们想要知道一段代码或者函数重复执行了几次时，就可以用console.count()了，每执行一次，计数器会自增1

network

1. hide时间轴（实用指数：???）

2. 重新发送请求（实用指数：???）
刷新页面

---

tips：浏览器的控制台自带类似jQuery的选择器语法，可以拿取DOM