eruda

eruda 介绍

eruda主要 功能 ：

捕获 console 日志

检查元素 状态

显示 性能 指标

捕获XHR请求

显示 本地存储和 Cookie 信息

浏览器特性检测等等

支持 辅助 函数

Chrome Devtools 在 console 面板执行 代码 时可以使用一些控制台才有的辅助 函数 ，比如常见的?选择 函数 ，复制，0 引用被选中元素等。Eruda 也 支持 了部分 方法 ， 包括 cop y、、、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/

如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。

查看更多关于eruda的详细内容...