Eruda 2.0 發布:移動端調試工具

2021-01-10 開源中國

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 頁進行反饋:)

相關焦點

  • H5 移動端調試全攻略
    一、概要因為移動端作業系統分為 iOS 和 Android 兩派,所以本文的調試技巧也會按照不同的系統來區分。尋找最合適高效的方式,才能讓你事半功倍。文章會列舉目前適合移動端調試的多種方案,快來選擇你的最佳實踐吧!
  • DevEco Studio 2.0,為跨端應用「高效開發」設計
    12月16日,萬眾期待的HarmonyOS 2.0手機應用開發者Beta版本在北京正式發布。與此同時,作為手機開發者Beta版本的配套IDE工具,HUAWEI DevEco Studio 2.0 Beta3也針對手機同步升級了相關特性功能,讓大家能夠更高效便捷地開發跨端應用。     Huawei DevEco Studio是華為打造的一款面向1+8+N全場景、泛終端的一站式集成開發環境。
  • AppCode 2.0 發布,JetBrains 的 ObjC 開發工具
    JetBrains 的 Objective-C 集成開發環境 AppCode 發布了 2.0 版本,該版本支持流行的 Kiwi
  • smart-doc 2.0.2 發布,Java 零註解 API 文檔生成工具
    支持從項目外部加載原始碼來生成欄位注釋(包括標準規範發布的 jar 包)。 支持生成多種格式文檔:Markdown、HTML5、Asciidoctor、Postman collection、Open Api 3.0+。 輕易實現在 Spring Boot 服務上在線查看靜態 HTML5 api 文檔。 開放文檔數據,可自由實現接入文檔管理系統。
  • smart-doc 2.0.1 發布,Java 零註解 API 文檔生成工具
    支持從項目外部加載原始碼來生成欄位注釋(包括標準規範發布的jar包)。 支持生成多種格式文檔:Markdown、HTML5、Asciidoctor、Postman collection、Open Api 3.0+。 輕易實現在Spring Boot服務上在線查看靜態HTML5 api文檔。
  • smart-doc 2.0.0 重磅發布,Java 零註解 API 文檔生成工具
    支持從項目外部加載原始碼來生成欄位注釋(包括標準規範發布的jar包)。 支持生成多種格式文檔:Markdown、HTML5、Asciidoctor、Postman collection、Open Api 3.0+。 輕易實現在Spring Boot服務上在線查看靜態HTML5 api文檔。
  • 移動辦公更安全、更高效,藍凌KK 7.0來啦!
    2.統一協作中心,實現跨組織跨地域無縫溝通KK 7.0通過IM消息、群組協作、組織架構通訊錄、工作檯應用入口等,打造企業一站式協作中心,方便全員隨時隨地協作溝通,助力業務的快速發展。4.統一開發集成,快速構建移動化輕應用KK7.0平臺通過內部封裝的130多個移動組件、移動業務模板與移動應用模板,在幫助企業EKP/KMS V15實現全線產品移動化的同時,還可以幫助企業開發人員提供對其他業務系統移動化的改造研發工作,包括可視開發、仿真調試、系統集成等。
  • 超強一代JupyterLab 3.0發布,兼具可視化調試、中文顯示、簡單交互...
    就在近日,這款好用的工具發布了新版本 JupyterLab 3.0。3 種安裝方式JupyterLab 3.0 的安裝方式有 3 種,第一種採用 pip 方式進行安裝,代碼如下:pip install jupyterlab==3第 2 種採用 mamba(快速跨平臺軟體包管理器)方式進行安裝,代碼如下:mamba install
  • 騰訊瀏覽服務TBS2.0發布 全面提升H5能力和渲染性能
    騰訊瀏覽服務TBS2.0即日全量發布,X5內核升級到Blink版本,H5能力和渲染性能全面提升。隨著TBS2.0的發布,使用TBS瀏覽服務的微信、手機QQ、空間等APP的瀏覽內核將隨之升級。
  • 如何使用微信開發者工具調試在微信端訪問的網頁
    假設我用vue開發了一個web應用,需要在手機微信裡訪問並調試, 可以按照本文介紹的步驟,使用微信開發者工具來調試.假設我的web應用的訪問入口是如下公眾號菜單的"預約"按鈕:那麼為了能夠在微信開發者工具裡調試,需要首先進入該公眾號的後臺,在web開發者工具裡,將我本人的微信號添加進去:點擊"綁定開發者帳號":輸入待綁定的微信帳號:
  • UniAdmin (原 InitAdmin) 0.2.1 發布,支持移動端管理後臺
    以 vue-element-admin 和 form-builder-create 為代表的的產品出現簡化了一部分工作,但是實際上後端開發者還是要在懂得很多新前端知識的前提下進行後臺的功能開發,每次發布版本還比以前多了一個步驟,打包前端。
  • PHPTrace 0.3 發布,線上調試工具
    最近兩周,PHPTrace發布了0.3版本,這次新版本發布距離上一次更新將近兩個月。
  • DevEco Studio 2.0 Beta3 發布,HarmonyOS 的配套 IDE
    12月16日,華為發布了 HarmonyOS 2.0 手機開發者 Beta 版。
  • 十大串口調試工具之誰是王者?
    Accessport V1.36(串口監聽、抓包工具)AccessPort,串口調試數據監測工具,可以調試串口程序或下位機程序,也可以攔截通過串口的數據流、控制流,讓用戶高效的執行調試、分析工作。 可以將指定埠的數據流、控制流信息攔截並保存下來,供分析之用。
  • PhantomJS 2.0.0 發布,伺服器端 JavaScript
    PhantomJS 2.0.0 發布,此版本更新了基於 Qt 5.3 的 WebKit 庫;不再支持 CoffeeScript,
  • 【第1820期】nohost — 遠程環境配置及抓包調試最佳實踐
    前言來了解一下 nohost 這工具。
  • QtSwissArmyKnife v3.3.0 發布,基於 Qt 打造的多功能、跨平臺調試...
    QtSwissArmyKnife v3.3.0 已經發布。
  • RT-Thread Studio V1.0.2 發布,物聯網作業系統一站式開發工具
    RT-Thread物聯網作業系統上一代的開發工具 ENV ,由於集成度不高,要配合其它工具來回切換使用。想要玩轉 ENV ,要了解Scons,Python,Kconfig 等眾多知識點,學習成本比較高。
  • DotTrace 5.1 發布,.NET性能調試工具
    DotTrace 5.1 發布了,DotTrace Performance是.NET平臺下常用的性能調試工具,能夠幫助.Net開發者以最快的方式找到並移除性能上的瓶頸
  • 十大串口調試工具之誰是王者?(沒有木馬,軟體免費下載)
    V2.2。是工程技術人員監視、調試串口程序的必備工具。Modbus等)自動加入校驗,還可將設定好的參數保存為註冊表文件,尤其適合做工業控制方面的通訊調試的串口設備調試工具。串口轉網絡調試助手v1.0 (USR-TCP232-Test)USR-TCP232-Test串口轉網絡調試助手把TCP/IP網絡調試助手與串口調試助手二合一,功能特點如下:1. 串口調試助手和網絡調試助手合二為一,特別適合調試網絡設備。2.