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

Question

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

为此，我想知道 Chrome 开发工具或其他工具中是否有一个选项可以获取类似于“网络”选项卡中提供的视图，但使用我自己的 JS 触发事件（如红色/蓝色线）。

有没有办法这样做？

Answer 1

显而易见的解决方案是使用控制台。它为您提供了比简单更多的工具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");)

_{（来源：google.com）}

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

_{（来源：google.com）}

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

_{（来源：google.com）}

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