如何在Chrome开发工具中显示自己的事件

Question

我想测量我的应用程序,它对性能非常敏感.

为此,我想知道Chrome开发工具中是否有选项或其他内容可以获得"网络选项卡"中提供的视图,但是我自己的JS触发事件(如红色/蓝色)线).

有办法吗？

Answer 1

显而易见的解决方案是使用Console.它为您提供了比简单更多的工具console.log:

• 格式化(console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");)

• 测量时间(console.time("Array initialize"); longRunningOperation(); console.timeEnd("Array initialize");)

• 分组(console.group("Authenticating user '%s'", user); authentication(); console.groupEnd();)

• 在时间轴上标记事件(console.timeStamp("Adding result");)

这应该足以创建自定义事件的可读日志. 有关使用控制台的更多提示,请参阅官方文档.