Chrome调试骚操作

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值