google DevTools 调试小技巧

打开Chrome 开发者工具

在 Chrome 菜单中选择 更多工具 > 开发者工具
在页面元素上右键点击，选择 “检查”
使用快捷键 Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac)

全局copy

使用全局方法copy(...)进行复制,对于数据量比较大时，方便复制

例如使用全局方法localStorage获取用户信息，可以
copy(localStorage)
然后在其他页面`ctrl+v`就能拿到数据了

切换 `DevTools`

窗口的展示布局下边和右边来回切换ctrl + shift + D (⌘ + shift + D Mac)
切换 DevTools 的面板,鼠标指向控制面板按下 ctrl + [ 和 ctrl + ] 可以从当前面板的分别向左和向右切换面板选项。

快速切换快捷键

在 Chrome 的调试打开的情况下按下 [ Ctrl] + [Shift] + [P] (Mac： [⌘] + [Shift]+ [P] )

console的骚操作

`console 中的 '$'`

$0,在 Chrome 的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用,$1 是对上一次我们选择的节点的引用
$_,对上次执行的结果的引用
$i,可以在 Dev Tools 里面来使用 npm 插件,运行 $i('lodash') 或者 $i('moment') 几秒钟后，你就可以获取到 lodash / momentjs
- $i使用
```
1.先安装 Console Importer 插件
2.关闭浏览器重新打开就可以了
```

`console({})`用{}包起来,更加直观

有时候 console.log 一个简单的变量，你可能会忘记（或混淆）哪一个是那个。那当你有不同的变量需要打印的时候，阅读起来会更费劲

const a= 1
const b= 2
console.log({a,b}) // {a: 1, b: 2}

`console.table` 适用于数组、类数组、对象

console.table 这个小技巧在开发者中可能并没有多少人知道: 如果有一个数组 (或者是 类数组 的对象，或者就是一个对象 )需要打印，你可以使用 console.table 方法将它以一个漂亮的表格的形式打印出来。它不仅会根据数组中包含的对象的所有属性，去计算出表中的列名，而且这些列都是可以缩放甚至 还可以排序!!! 对于后台而言，只有 node 版本大于 10 以上， console.table 才能起作用

`console.dir()`查看DOM关联到的真实对象

const li = $('li')
console.dir(li)

`console.time()`,`console.timeEnd()`监测执行时间

console.time() — 开启一个计时器
console.timeEnd() — 结束计时并且将结果在 console 中打印出来

`console.log` 加上 `CSS` 样式

如果你给打印文本加上 %c 那么 console.log 的第二个参数就变成了CSS 规则！这个特性可以让你的日志看起来不一样,可以尝试一下下面的例子

console.log('%comMyGod','color:#f40;font-size:50px')
console.log('%chello world!','color:#f40;background:black;font-size:50px')
console.log('%c祝所有boy-girl,情人节快乐!','color:#fff;background:linear-gradient(to bottom, #ACB6E5, #74ebd5);font-size:50px')