Cocos Creator 的 Chrome 控制臺調(diào)試高階指南！功能與使用方法詳解
Chrome 控制臺是很多開發(fā)者的必備工具之一，但你真的掌握了它的精髓嗎？是否還是全靠 console.log() 排查問題？其實，控制臺的功能遠比這更強大，用好控制臺，能幫助我們更加準確高效地發(fā)現(xiàn)問題、定位問題，讓 bug 無所遁形。
今天就同大家分享一下我自己常用的?Chrome 控制臺調(diào)試功能及使用方法，希望能幫助大家的 Cocos Creator 項目在 Chrome 控制臺更好地進行調(diào)試。限于篇幅，本文僅提煉了重點內(nèi)容，更像是一個目錄索引，詳細的功能介紹和使用方法均寫在論壇專貼中，點擊文末【閱讀原文】即可前往查看。
PART 1
1.1 在任何網(wǎng)頁上運行 JavaScript 的代碼片段
個人理解就是可以替代 bookmarklet 來使用。
代碼片段是在源工具中創(chuàng)作的腳本。代碼段有權訪問網(wǎng)頁的 JavaScript 上下文，并且您可以在任何網(wǎng)頁上運行代碼段。
代碼段是 bookmarklet 的替代方法，區(qū)別在于代碼段僅在 DevTools 中運行，并且不限于 URL 的允許長度。
示例如圖。感覺更方便，可以自由保存，可以換行格式化代碼。
1.2 調(diào)試 JavaScript 入門
事件偵聽器斷點，可以自動斷點調(diào)試，斷點時建議開啟 Pause on exceptions。
示例如下圖，自動監(jiān)聽用戶點擊事件，然后斷點。Pause on exceptions 自動報錯斷點可以追蹤代碼錯誤然后自動斷點。
1.3 使用實時表達式監(jiān)視 JavaScript 中的更改
添加新實時表達式，點小眼睛，輸入表達式。
1.4 分析運行時性能
使用 DevTools 性能工具，通過 Performance 面板在頁面上查找性能瓶頸。
模擬移動 CPU，可以用于模擬 iOS 的環(huán)境，非常方便測試（建議使用）。與臺式機和筆記本電腦相比，移動設備的 CPU 功率更小。每當你分析頁面時，都可使用 CPU 節(jié)流來模擬頁面在移動設備上的表現(xiàn)。
記錄運行時性能，可以監(jiān)測代碼 Long Task 耗時的地方（建議使用）。運行優(yōu)化版本的頁面時，藍色圖標會移動得更快。為什么？兩種版本都應該在相同的時間內(nèi)將圖標移動相同的空間。在性能工具中錄制，了解如何檢測未優(yōu)化版本中的性能瓶頸。
記錄運行時性能，可以監(jiān)測+分析每秒幀數(shù)（建議使用）。測量任何動畫性能的主要指標是每秒幀數(shù) (FPS) 。當動畫以 60 FPS運行時，用戶會覺得很享受。
打開 FPS 計數(shù)，可以監(jiān)測+分析每秒幀數(shù)（建議使用）。
控制臺錄制 Performance 后查找瓶頸（建議使用）。測量并驗證動畫運行不佳后，下一步是回答「為什么？」這一問題。
控制臺錄制 Performance 后分析運行時性能。
Performance 面板
1.5 在控制臺中運行 JavaScript，簡單執(zhí)行（個人比較常用）
在控制臺輸入簡單的代碼。可以在控制臺中輸入任何 JavaScript 表達式、語句或代碼段，并且它會在鍵入時立即以交互方式運行。
在控制臺編寫復雜表達式的自動完成（寫 Cocos 的代碼也會有自動代碼提示）。控制臺可幫助你使用自動完成編寫復雜的 JavaScript。此功能是了解以前不知道的 JavaScript 方法的一種好方法。
控制臺輸入 Cocos 的代碼
控制臺查看歷史記錄。之前輸入的代碼也能也能找到和導出，此外控制臺還提供了很多實用應用程序，簡化我們的工作。
控制臺多行編輯。默認情況下，控制臺只提供一行來編寫 JavaScript 表達式。如果在控制臺中啟動多行語句，將自動識別代碼塊并縮進。
控制臺使用頂級 await () 的網(wǎng)絡請求。除了在你自己的腳本中，?控制臺還支持頂級 await 在它內(nèi)運行任意異步 JavaScript。
1.6 性能功能參考
如何使用性能工具分析頁面性能？此處總結了30余個本人常用的 DevTools 性能功能，論壇中有詳細的分步使用教程。
記錄性能：
記錄運行時性能、記錄加載性能、錄制時捕獲屏幕截圖、錄制時強制收集垃圾、顯示錄制設置、禁用 JavaScript 示例、在錄制時限制網(wǎng)絡、錄制時限制 CPU、啟用高級畫圖檢測工具
保存錄制內(nèi)容
加載錄制
清除上一記錄
分析性能錄制：
選擇錄制的一部分、搜索活動、查看主線程活動、查看表格中的活動（根活動、呼叫樹選項卡、自下而上面板、事件日志面板）、查看 GPU 活動、查看光柵活動、查看交互、分析每秒幀數(shù) (FPS)（FPS 圖表、幀部分）、查看網(wǎng)絡請求、查看內(nèi)存指標、查看部分錄制的持續(xù)時間
PART 2
RAIL?是一種以用戶為中心的性能模型，它提供了一種考慮性能的結構。該模型將用戶體驗分解到按鍵操作（例如點擊、滾動、加載）中，幫助您為每個操作定義性能目標。
RAIL 代表 Web 應用生命周期的四個不同方面：響應、動畫、空閑和加載。用戶對這些上下文分別有不同的性能期望，因此，性能目標是根據(jù)上下文以及用戶如何感知延遲的用戶體驗研究來定義的。
RAIL 將用戶作為性能工作的關鍵點。下表介紹了用戶如何感知性能延遲的關鍵指標：
用戶對性能延遲的感知有所不同，具體取決于網(wǎng)絡條件和硬件。例如，通過快速 Wi-Fi 連接，在功能強大的臺式機上加載站點時，通常只需不到1秒時間，用戶已經(jīng)習以為常。通過速度較慢的 3G 網(wǎng)絡連接，在移動設備上加載站點則需要更長的時間，因此，移動用戶通常會更有耐心。在移動設備上，5秒鐘內(nèi)完成加載是更現(xiàn)實的目標。
2.1 響應：在50毫秒內(nèi)處理事件
目標：在100毫秒內(nèi)完成由用戶輸入發(fā)起的轉換，讓用戶感覺交互是即時的。
準則?：
為了確保在100毫秒內(nèi)產(chǎn)生可見響應，需要在50毫秒內(nèi)處理用戶輸入事件。這適用于大多數(shù)輸入，例如點擊按鈕、切換表單控件或啟動動畫。但是，這不適用于觸摸拖動或滾動。
盡管聽起來可能有些自相矛盾，但是，即時響應用戶輸入并非總是正確的做法。您可以利用這100毫秒的時間窗口來執(zhí)行其他需要消耗大量資源的工作，但是，注意不能妨礙用戶。如果可能，應在后臺工作。
對于需要50毫秒以上才能完成的操作，請隨時提供反饋。
為什么我們的預算只有50毫秒？這是因為除輸入處理外，通常還有需要執(zhí)行其他工作，而且這些工作會占用可接受輸入響應的部分可用時間。如果應用程序在空閑時間以推薦的50毫秒?yún)^(qū)塊執(zhí)行工作，這就意味著，如果輸入在這些工作區(qū)塊之一中發(fā)生，它最多可能會排隊50毫秒。考慮到這一點，假設只有剩余的50毫秒可用于實際輸入處理才是安全的做法。下圖展示了這種影響，圖中顯示了在空閑任務期間收到的輸入如何排隊，從而減少可用的處理時間：
空閑任務如何影響輸入響應預算
2.2 動畫：在10毫秒內(nèi)生成一幀
目標：
在10毫秒或更短的時間內(nèi)生成動畫的每一幀。從技術上來講，每幀的最大預算為16毫秒（1000毫秒/每秒60幀≈16毫秒），但是，瀏覽器需要大約6毫秒來渲染一幀，因此，準則為每幀10毫秒。
目標為流暢的視覺效果。用戶會注意到幀速率的變化。
準則?：
在動畫之類對計算速度要求極高的場景下，關鍵在于即使可行，您也不能執(zhí)行任何其他操作，讓不能執(zhí)行的操作保持絕對最少。只要可能，您就要利用這100毫秒的響應時間預先計算最消耗資源的工作，從而最大限度地提高達到 60fps 的幾率。
有關各種動畫優(yōu)化策略，請參閱渲染性能。
2.3 空閑：最大限度增加空閑時間
目標：最大限度增加空閑時間以提高頁面在 50 毫秒內(nèi)響應用戶輸入的幾率。
準則?：
利用空閑時間完成延緩的工作。例如，對于初始頁面加載，應加載盡可能少的數(shù)據(jù)，然后利用空閑時間加載其余數(shù)據(jù)。
在 50 毫秒或更短的空閑時間內(nèi)執(zhí)行工作。如果時間更長，您可能會干擾應用在 50 毫秒內(nèi)響應用戶輸入的能力。
如果用戶在空閑時間工作期間與頁面交互，則應中斷空閑時間工作，用戶交互始終具有最高優(yōu)先級。
2.4 加載：在5秒內(nèi)交付內(nèi)容并實現(xiàn)可交互
當頁面加載緩慢時，用戶注意力會分散，他們會認為任務已中斷。加載速度快的網(wǎng)站具有更長的平均會話時間、更低的跳出率和更高的廣告可見性。
PART 3
最后補充一些進階「黑科技」！我們可以運用代碼更好更快地操作控制臺，以下是我個人常用的幾個功能，對應代碼見論壇專貼。
使用
console.log&?console.error&console.warn等，將輸出到控制臺的信息進行分類整理再配合?
console.group&console.groupEnd，可以將這種分類管理的思想發(fā)揮到極致關于
console.log，Chrome 提供了這么一個 API：第一個參數(shù)可以包含一些格式化的指令比如?%c直接以表格的形式將數(shù)據(jù)輸出：
console.table條件判斷輸出日志：
console.assert計數(shù)日志：
console.count數(shù)據(jù)樹形輸出：
console.dir函數(shù)執(zhí)行時間計算輸出：
console.time&console.timeEnd查看 CPU 使用相關信息：
console.profile&console.timeLime堆棧跟蹤相關的調(diào)試：
console.trace控制臺自帶的內(nèi)容：
$_復制控制臺的數(shù)據(jù)結構：
copy對象操作：
keys&valuesmonitor&unmonitor：monitor(function)，它接收一個函數(shù)名作為參數(shù)，比如function a，每次a被執(zhí)行了，都會在控制臺輸出一條信息，里面包含了函數(shù)的名稱a及執(zhí)行時所傳入的參數(shù)。而unmonitor(function)便是用來停止這一監(jiān)聽。debug&undebug：debug同樣也是接收一個函數(shù)名作為參數(shù)。當該函數(shù)執(zhí)行時自動斷下來以供調(diào)試，類似于在該函數(shù)的入口處打了個斷點，可以通過 debugger 來做到，同時也可以通過在 Chrome 開發(fā)者工具里找到相應源碼然后手動打斷點。而undebug則是解除該斷點。
具體的使用方法和更多功能介紹請點擊【閱讀原文】前往論壇專貼查看，歡迎大家查漏補缺。
參考鏈接：
Microsoft Edge Development
https://docs.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/
使用 RAIL 模型衡量性能
https://web.dev/rail/?utm_source=devtools#goals-and-guidelines
