chrome DevTools使用技巧

Posted 2020-11-27 jgx2020

1. console.dir，可简写为dir

利用该命令可列出参数object的所有对象属性

2. 获取对象键值keys(object)/values(object)

利用该命令可以获取对象的key和value

3. 函数监听器monitor(function)/unmonitor(function)

monitor(function),当调用指定的函数时，会将一条消息记录到控制台，该消息指示调用时传递给该函数的函数名和参数。

使用unmonitor(function)停止对指定函数的监视。

4. 事件监听器monitorEvents(object[,events])/unmonitorEvents(object[,events])

monitorEvents(object[,events]),当指定的对象上发生指定的事件之一时，事件对象将被记录到控制台。事件类型可以指定为单个事件或事件数组。

unmonitorEvents(object[,events])停止监视指定对象和事件的事件

5. 耗时监控

通过调用console.time()可以开启定时器。必须传入一个字符串参数来唯一标记这个计时器的ID。当要结束计时的时候可以调用console.timeEnd()，并且传入指定的名字。计时结束后控制台会打印计时器的名字和具体的时间。

6. 分析程序性能

在DevTools窗口控制台中，使用console.profile()开启一个javascript CPU分析器。结束分析器直接调用console.profileEnd()

7. 统计表达式执行次数

console.count()方法用于统计表达式被执行的次数，它接手一个字符串参数用于标记不同的记号。如果两次传入相同的字符，该方法就会累计计数。

8. 检查动画

Chrome DevTools 动画检查器有两个主要用途。

• 检查动画。您希望慢速播放、重播或检查动画组的源代码。
• 修改动画。您希望修改动画组的时间、延迟、持续时间或关键帧偏移。 当前不支持编辑贝塞尔曲线和关键帧。

动画检查器支持 CSS 动画、CSS 过渡和网络动画。当前不支持 requestAnimationFrame 动画。

快捷键 ctrl+shift+p ,打开 Command Menu,键入 Drawer: Show Animations。

9. 复制 Fetch

---

• 作者：null仔
• 链接：https://juejin.im/post/5e0cb3ba5188253ab46da675
• 来源：掘金
• 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。