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

這應該足以創建自定義事件的可讀日志。 有關使用控制台的更多提示，請參閱官方文檔。