eruda 介绍
eruda主要功能:
捕获 console 日志
检查元素状态
显示性能指标
捕获XHR请求
显示本地存储和 Cookie 信息
浏览器特性检测等等
支持辅助函数
Chrome Devtools 在 console 面板执行代码时可以使用一些控制台才有的辅助函数,比如常见的 选择函数,复制,0 引用被选中元素等。Eruda 也支持了部分方法,包括 copy、、、x、clear、dir、table、keys,以及 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 等,可根据自己喜好调整外观。链接: http://www.fly63.com/nav/895网站地址:https://eruda.liriliri.io/
GitHub:https://github.com/liriliri/eruda
网站描述:一个专为手机网页前端设计的调试面板
eruda
官方网站:https://eruda.liriliri.io/
小编说
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。