Eruda mobile debugging tool has been suspended for more than half a year after the release of version 1.5.4. In the second half of this year, the development of Eruda mobile debugging tool was relaunched, mainly focusing on the optimization of console performance which was criticized in the past, and also made some adjustments to the overall appearance of the tool. So far, version 2.0 has been successfully released. So, what are the new updates to the previous version?
Support for auxiliary functions
When executing code in the Console panel, Chrome Devtools can use some console-only helper functions, such as the common $select function, copy copy, and $0 reference to the selected element. Eruda also supports some methods, including copy, $,? , $x, clear, dir, table, keys, and $0-$4 element access.
The console. The group support
Most console object methods have been supported in earlier versions of Eruda, but some support methods are not available. With the exception of profile and profileEnd methods, the new version of Eruda already supports almost all methods on console objects, including grouping. At the same time, the early implementation of table, style printing some problems have also been corrected. The complete list of console methods currently supported is as follows: log, error, info, warn, dir, time/timeLog/timeEnd, clear, count/countReset, assert, table, group/groupCollapsed/groupEnd
Asynchronous rendering
Older versions of Eruda rendered the results to the page synchronously when you executed console.log, which caused the program to lag. For example, execute for (let I = 0; i < 1000; I ++) console.log(I), which you can see is quite time-consuming when using Eruda. With the new version of Eruda, as long as asynchronous rendering is turned on (which is the default), there is little impact on the speed of code execution and the page does not get stuck. Of course, after executing the code, you will see the log step by step printed out on the tool.
Memory optimization
Because the original HTML string is stored for each log, older versions can cause memory to explode and crash the page when printing a large number of logs. The new log information saves only the dom nodes after rendering, reducing the memory usage by more than 50%.
Rendering optimization
The log is printed for a long time, and because there are so many DOM objects, scrolling becomes very slow. Here, common long list optimization techniques are used to render only the logs in the visible area, which greatly optimizes the scrolling performance under the long list. The memory consumption and fluency of printing 10,000 logs are within an acceptable range.
The theme
To give developers a closer experience with the Chrome debugger, the new version uses a similar look and feel to DevTools, as well as a darker theme (optional in the Settings panel). Not only that, Eruda also adds a number of classic theme colors, such as Monokai, to adjust the appearance according to your preferences.
Eruda has been more than 3 years since the release of version 1.0 in 2016. It will continue to be updated and maintained in the future. Welcome to use it.
PS: If you have any questions or suggestions, please go to the issue page of the warehouse for feedback 🙂