fps测试网页_Eruda移动端网页前端调试神器

 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

- END -