console
-
$0-$4
$0
为当前选择的元素,$1
为上次选择的元素… -
$ 和 和 和
$$
返回的是数组,$
返回的是nodelist
Array.from(\$('div'))==$$('div')
-
$_
$_
为上次返回的结果 -
$i
借助console import插件实现控制台引入npm包
$i('lodash')
-
一次打印多个变量
console.log({a,b,c})
将会输出下面这样 -
使用实时表达式
copy和saving
-
copy
copy(数据/变量)
类似于ctrl+c
,配合ctrl+v
粘贴到vsc进行后续操作 -
Store as global
会依次生成变量
temp1
….tempn
保存数据,配合copy(temp1)可复制粘贴到vsc
command
-
cmd+shift+p
开启command
-
截取页面内容
- 开启
command
- 输入
screen
- 选取需要截图的元素节点
- 选择
capture node screenshot
- 开启
-
切换面板布局
- 开启
command
- 输入
layout
- 选择相应布局
- 开启
-
切换面板主题
- 开启
command
- 输入
theme
- 选择相应主题
- 开启
-
给console加时间
- 开启
command
- 输入
timestamps
- 选择
show timestamps
若想看时间间隔,用
console.time()
、console.timeEnd()
- 开启
-
查看在浏览器的elements的类名样式有哪些修改(或者
drawer
里面直接选择changes
打开)- 开启
command
- 输入
changes
- 选择
show changes
只有在含有类名的样式中修改才可以查看变化,行内样式是查看不了的。
- 开启
调试
-
条件断点
-
可以直接在条件断点里面写console,而不用修改源代码
-
dom断点
可以监听到节点被添加或者移除,或者它的属性被改变
drawer
Esc
打开drawer
红色部分是drawer
- 传感器
Snippets
-
source
中的snippets
可以暂时存储代码
-
cmd+shift+p代开command,输入!可快速调用代码块某个文件中js