如何在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");）

这应该足以创建自定义事件的可读日志。 See the official docs for more tips on using the Console.