谷歌控制台

console

1. $0-$4

   $0为当前选择的元素，$1为上次选择的元素…

2. $$和$

   $$返回的是数组,$返回的是nodelist

   Array.from(\$('div'))==$$('div')

3. $_

   $_为上次返回的结果

4. $i

   借助console import插件实现控制台引入npm包

   $i('lodash')

5. 一次打印多个变量

   console.log({a,b,c})将会输出下面这样

   

6. 使用实时表达式

copy和saving

1. copy

   copy(数据/变量)类似于ctrl+c，配合ctrl+v粘贴到vsc进行后续操作

2. Store as global

   会依次生成变量temp1….tempn保存数据，配合copy(temp1)可复制粘贴到vsc

command

1. cmd+shift+p开启command

2. 截取页面内容

   1. 开启command
   2. 输入screen
   3. 选取需要截图的元素节点
   4. 选择capture node screenshot

3. 切换面板布局

   1. 开启command
   2. 输入layout
   3. 选择相应布局

4. 切换面板主题

   1. 开启command
   2. 输入theme
   3. 选择相应主题

5. 给console加时间

   1. 开启command
   2. 输入timestamps
   3. 选择show timestamps

   若想看时间间隔，用console.time()、console.timeEnd()

6. 查看在浏览器的elements的类名样式有哪些修改（或者drawer里面直接选择changes打开）

   1. 开启command
   2. 输入changes
   3. 选择show changes

   只有在含有类名的样式中修改才可以查看变化，行内样式是查看不了的。

调试

1. 条件断点
   

2. 可以直接在条件断点里面写console，而不用修改源代码
   

3. dom断点
   可以监听到节点被添加或者移除，或者它的属性被改变
   

drawer

1. Esc打开drawer
   红色部分是drawer
   
2. 传感器
   

Snippets

1. source中的snippets可以暂时存储代码
   

2. cmd+shift+p代开command,输入!可快速调用代码块某个文件中js