打开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')
network
过滤
在fliter输入框内输入,什么都没有的情况,未过滤的请求
在输入框内输入-method:GET,过滤GET请求
在输入框内输入-method:POST,过滤POST请求
network的table定制
我们可以双击network这个表,选择自己想要看到的信息,比如说method方法显示在这个table中,鼠标点击含有name的table栏,弹出选项进行选择
选择后的效果
Drawer
如何打开 Drawer
当你在 DevTools
(任何选项卡)中时,按 [esc]
来显示它,再次按 [esc]
隐藏它
当遇到想操作不同的区域时可以这样比较方便
也可以进行之前的操作command + shift + P
(mac)快捷键进行快捷操作
比如选择改变颜色