fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

eruda
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://eruda.liriliri.io/
GitHub:https://github.com/liriliri/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 等,可根据自己喜好调整外观。


链接: https://fly63.com/nav/895

more>>
相关栏目
Jest
Facebook开发的一个对javascript进行单元测试的工具
官网GitHub
puppeteer
web前端自动化测试利器
官网GitHub
mocker-api
为 REST API 创建模拟 API
官网GitHub
FrontJS
轻量级的网站错误监控平台
官网
Gremlins.js
模拟用户随机操作的 JS 测试库
点击进入GitHub
JSDebugger
基于 JavaScript 的调试程序
官网GitHub
PhantomCSS
像素对比工具
点击进入GitHub
DejaVue
Vue.js的可视化Chrome开发工具
官网GitHub
avoriaz
一个Vue.js测试工具类库
官网GitHub
qunit
一个强大的JavaScript单元测试框架
官网GitHub
Expect.js
写一些简单测试用例、仿自然语言的方法
官网GitHub
should.js
一款js测试断言库
官网GitHub
supertest
nodejs开发单元测试
点击进入GitHub
Fundebug
一行代码搞定BUG监控!
官网
jasmine
一款 JavaScript 测试框架,它不依赖于其他任何 JavaScript 组件
官网GitHub
RegExr
一个基于HTML/JS的工具,用于创建,测试和学习正则表达式
官网GitHub

手机预览