Eruda是什么?
Eruda是一个专为手机网页前端设计的移动端调试面板,类似于vconsole但比vconsole更加强大,基本等于电脑浏览器调试器DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。
- 特性 -
•按钮拖拽,面板透明度大小设置。•Console 面板:捕获 Console 日志,支持 log、error、info、warn、dir、time/timeEnd、clear、count、assert、table;支持占位符,包括 %c 自定义样式输出;支持按日志类型及正则表达式过滤;支持 JavaScript 脚本执行。•Elements 面板:查看标签内容及属性;查看应用在 Dom 上的样式;支持页面元素高亮;支持屏幕直接点击选取;查看 Dom 上绑定的各类事件。•Network 面板:捕获请求,查看发送数据、返回头、返回内容等信息。•Resources 面板:查看并清除 localStorage、sessionStorage 及 cookie;查看页面加载脚本及样式文件;查看页面加载图片。•Sources 面板:查看页面源码;格式化 html,css,js 代码及 json 数据。•Info 面板:输出 URL 及 User Agent;支持自定义输出内容。•Snippets 面板:页面元素添加边框;加时间戳刷新页面;支持自定义代码片段。
- 演示图 -
在线演示地址(可用手机或电脑打开):https://eruda.liriliri.io/
- 源地址 -
https://github.com/liriliri/eruda
- 安装方法 -
1、NPM安装
npm install eruda --save
2、CDN地址
cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js
- 基本使用方式 -
//引入eruda.js
初始化函数eruda.init()
可以传入相应的配置来自定义控制调试器;
eruda.init({ container: el, tool: ['console', 'elements'], useShadowDom: true })
•container:用于插件初始化的 Dom 元素,如果不设置,默认创建 div 作为容器直接置于 html 根结点下面•tool:指定要初始化哪些面板,默认加载所有。
- 扩展eruda插件 -
如果默认控制台的显示信息没有你需要的,你也可以下载安装eruda的扩展插件,也可以自己编写想要插件并引入到eruda调试器中(编写教程:https://github.com/liriliri/eruda/blob/master/doc/PLUGIN.md)
目前的eruda插件库
•eruda-fps:展示页面的 fps 信息。•eruda-features:浏览器特性检测。•eruda-timing:展示性能资源数据。•eruda-memory:展示页面内存信息。•eruda-code:运行 JavaScript 代码。•eruda-benchmark:运行 JavaScript 性能测试。•eruda-geolocation:测试地理位置接口。•eruda-dom:浏览 dom 树。•eruda-orientation:测试重力感应接口。•eruda-touches:可视化屏幕 Touch 事件触发。
安装插件
只需使用npm安装相应的插件
npm install 相应的插件名 --save
使用插件
在初始化插件前向eruda添加该插件即可显示该插件面板,如:
//添加fps信息插件eruda.add(erudaFps)
更多详情请查看Eruda的源地址仓库
- 联系与投稿 -
欢迎大家投稿分享各种便捷实用的或新奇有趣的前端工具库或插件,让我们一起建立起一个便捷的前端工具中文介绍库,便于各位前端开发者搜索使用和提高工作效率!
联系方式:公众号私信 或 发邮件到
FEZIRO@foxmail.com