看了掘金小册的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