Eruda 移動端調試工具在 1.5.4 版本發布後有長達半年多的時間暫停了更新,於今年下半年重新投入精力開發,主要針對之前被詬病較多的 console 性能進行了優化,同時也對工具的整體外觀做了一定調整,到現在終於成功發布了 2.0 版本。那麼,新版本相對於之前做了哪些更新呢?
支持輔助函數Chrome Devtools 在 console 面板執行代碼時可以使用一些控制臺才有的[輔助函數](https://developers.google.com/web/tools/chrome-devtools/console/utilities),比如常見的 $ 選擇函數,copy 複製,$0 引用被選中元素等。Eruda 也支持了部分方法,包括 copy、$、$$、$x、clear、dir、table、keys,以及 $0-$4 元素訪問。
console.group 支持Eruda 早期版本已經支持了大部分的 console 對象方法,但還存在個別支持方法不可使用。除 profile、profileEnd 等方法無法實現外,新版本的 Eruda 基本上已經支持了 console 對象上的全部方法,包括分組功能。同時,早期實現的 table、樣式列印存在的一些問題也一一進行了修正。目前支持的完整 console 方法列表如下:log, error, info, warn, dir, time/timeLog/timeEnd, clear, count/countReset, assert, table, group/groupCollapsed/groupEnd
異步渲染舊版本的 Eruda 在你執行 console.log 時會同步將結果渲染到頁面上,這會導致程序執行卡頓。比如執行 `for (let i = 0; i < 1000; i++) console.log(i)` 這段代碼,你會發現在使用 eruda 時其耗時相當嚴重。使用新版 Eruda,只要開啟異步渲染(默認開啟)就基本不會影響到代碼的執行速度,也不會讓頁面卡住無法使用。當然,在執行完代碼後,你才會看到工具上分步將日誌列印出來。
內存優化由於對每條日誌存儲了原始的 html 字符串,舊版本在列印大量日誌時會導致內存爆漲使頁面 crash。新版日誌信息僅保存渲染後的 dom 結點,內存佔用相比之前減少 50% 以上。
渲染優化日誌列印多時會形成一個很長的列表,因為 dom 對象太多,滾動時會變得十分卡。這裡運用了常見的長列表優化技巧,只渲染可視區域的日誌,極大優化了在長列表下的滾動性能,實測列印 1 萬條日誌內存佔用及流暢度都在可接受範圍內。
主題為了讓開發者使用時更接近 Chrome 調試工具的體驗,新版本採用了與 DevTools 相近的外觀配色,還提供了暗色主題(在設置面板裡可選)。不僅如此,Eruda 還加入了多個經典主題配色,比如 Monokai 等,可根據自己喜好調整外觀。
Eruda 自 2016 年發布 1.0 版本後,已經過了 3 年多的時間,未來會繼續更新維護,歡迎大家使用。
PS:如果有問題或建議,可以到倉庫 issue 頁進行反饋:)