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/

5b88b003d1eafb748e440b983ba37756.gif

- 源地址 -

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 -

cb2e2fc05630f297002c75a194951189.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值