Photo by Louis Hansel on Unsplash

這篇文章記錄記錄操作各面板的心得，目標是可以輕鬆快速地閱讀，約20分鐘內的內容。

最近工作上遇到一個任務，是要優化專案內的手機版本某項動畫功能。
先前看到 你所不知道的各種前端 Debug 技巧 這篇教學文章，覺得寫的超棒! 也很易於學習，但看完就忘XD。
接到工作後，猛然想起來好像能派上用場，解決問題同時順道熟練這項工具，讚!

資源

你所不知道的各種前端 Debug 技巧

页面渲染：性能分析

主題

簡單列一下這次使用到的功能

• elements
• console
• Source
• network
• performance
• drawer / performance monitor
• drawer / Rendering

黑色主題

F12開啟工具後，點擊齒輪 > preferences > Theme: 下拉選單找 Dark

打開抽屜 (drawer)

在工具內按下 esc 就可以打開drawer，預設會開啟 console 面板，而點擊旁點的...按鈕可以增加顯示其他功能面板

Elements 面板

做為一個前端工程師，用 Elements 面板偷改html or css 也是很正常的事，比方說什麼黑底白字方便閱讀網頁、取消鎖右鍵、或者把某些遮在網頁上的討厭廣告div直接刪除之類的XD

• 點其中一個html element 之後案 ctrl + f 可以開啟搜尋列

旁邊的 Style, Computed, Event Listeners 也有很多東西可以玩，但這次使用到的比較少

console

• 印出有顏色的 console.log

const css = 'color:blue'
console.log('%c文字', css)

色碼也可以用，很適合在有一堆混亂訊息的專案中使用

Sources

• 中斷點相關功能超實用，建議務必玩玩看鐵人賽文章中的範例

對條件下斷點，就可在中斷的時候直接檢查，不用console.log

Network

可以檢查是否有資源檔案過大，包含音效與圖檔能壓縮就盡量壓縮。或是檢測有沒有不該載入的資源、lazzy loading 有沒有正常

performance

這次使用最頻繁的面板，錄製一段時間分析，每個 frame 運作是否正常、哪邊的task過肥導致卡頓，有相當多的資訊可以看。

有勾選這個項目的話可以看到layer的資訊

錄製時間越長就會跑越久，且轉換期間沒辦法切換到其他的面板。

錄製完成長這樣

之後會在FPS那條找看看有沒有紅色的地方、明顯降低的部分、或是 Frame 內特別長的task，再點進去Task看看是誰在搞怪

詳細檢測與優化推薦閱讀: 页面渲染：性能分析

drawer / performance monitor

• 叫出 drawer額外面板的方式是點擊console旁邊的點點點按鈕

提供即時的效能資訊，包含CPU、heap size、Dom Nodes等相關資訊。
可以粗略地先拿這個面板看過，尋找效能比較不OK的地方之後，再用 performance 面板去錄製該段程式。

drawer / Rendering

這個面板內有很多選項，包含顯示當前FPS、layer邊界等資訊

總結

performance 面板錄影下去之後，哪邊效能不好就一目了然，很方便對症下藥找到問題點。

不過還是有遇到一些問題，像是PIXI ticker內的動畫，顯示funtion名稱就是 ticker 而不曉得裡面做了什麼事，只能從畫面上去猜。同樣的問題也發生在一些背景定時任務上，觀測到某些時間點會特別卡，但不曉得是網路的問題還是背景任務在搞怪。

此外，也有使用 memory面板觀測記憶體的消耗量，但碰到的問題是:優化的程式跟耗用記憶體不明顯，難以驗證。搞不好優化猜測的方向就是錯的(暈

不曉得在手機上放乖乖有沒有效