使用神器eruda 进行移动端调试

eruda与腾讯推出的vconsole很相似,都是用于移动端的调试,让开发者在移动端的浏览器中获得近似PC端浏览器的调试能力。

截止至本文发稿之日,eruda在GitHub上已经有2.7K个star

你是否被以下情况所困扰??

  • ?在PC上调试好好的页面,运行在手机端时却直接崩溃,很难判断究竟发生了什么
  • ?手机端页面请求服务端数据后,页面渲染不正确,根本不清楚是接口返回错误还是前端渲染错误
  • ?手机端显示异常,可是在PC端显示却是好好的,完全搞不懂是哪个CSS编写有问题

遇到上述情况的你,心情就像下面的样子

eruda是什么

手机端遇到问题时,你最希望的是手机端可以像PC上的Chrome那样——用调试工具看看究竟发生了什么。

于是就有了eruda。

Eruda 是一个专为手机网页前端设计的调试面板,类似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。

功能清单

1.按钮拖拽,面板透明度大小设置。

2.Console面板:捕获Console日志,支持log、error、info、warn、dir、time/timeEnd、clear、count、assert、table;支持占位符,包括%c自定义样式输出;支持按日志类型及正则表达式过滤;支持快捷命令加载underscore、jQuery库;支持JavaScript脚本执行。

3.Elements面板:查看标签内容及属性;查看应用在Dom上的样式;支持页面元素高亮;支持屏幕直接点击选取;查看Dom上绑定的各类事件。

4.Network面板:图表显示页面加载速度;查看页面各资源请求时间(Android);捕获XHR请求,查看发送数据、返回头、返回内容等信息。

5.Resources面板:查看并清除localStorage、sessionStorage及cookie;查看页面加载脚本及样式文件;查看页面加载图片。

6.Sources面板:查看页面源码;格式化html,css,js代码及json数据。

7.Info面板:输出URL及User Agent;支持自定义输出内容。

8.Snippets面板:页面元素添加边框;加时间戳刷新页面;支持自定义代码片段。

如何使用

通过CDN使用:

通过npm安装:

在页面中加载脚本:

Js文件对于移动端来说略重(gzip后大概80kb)。建议通过url参数来控制是否加载调试器,比如:

初始化时可以传入配置:

  • container: 用于插件初始化的Dom元素,如果不设置,默认创建div作为容器直接置于html根结点下面。
  • tool:指定要初始化哪些面板,默认加载所有。

原文发布于微信公众号 - 较真的前端(gh_7af41a2be77e)

原文发表时间:2017-12-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

vuejs初体验-Chrome插件开发实录

3022
来自专栏学一学大数据

微信跳一跳秒shua分

2038
来自专栏腾讯NEXT学位

小程序初学者必读——小程序的简单入门

2243
来自专栏小古哥的博客园

微信小程序-开发入门(一)

微信小程序已经火了一段时间了,之前一直也在关注,就这半年的发展来看,相对原生APP大部分公司还是不愿意将主营业务放到微信平台上,以免受制于腾讯,不过就小程序的应...

5925
来自专栏娱乐心理测试

xcode 9以后导入图片遇到显示不出的问题

2172
来自专栏coding for love

浏览器加载解析渲染机制的全面解析

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1061
来自专栏Google Dart

AngularDart4.0 指南-体系结构概述 顶

AngularDart(我们通常在这个文档中简单地称为Angular)是一个框架,用于在HTML和Dart中构建客户端应用程序。它是作为Angular包发布的,...

853
来自专栏编程直播室

Angular 2的基本构建块

2193
来自专栏WindCoder

Ubuntu14.04下使用fcitx安装搜狗及双拼输入法

之前Ubuntu打不开了,重新装了一遍,顺便把一些东西直接记录下来,省得日后再四处爪哇。。。

4193
来自专栏前端儿

微信小程序 - 入门指引

设置 -> 开发者设置 -> 服务器域名中   配置好服务器域名,小程序才能正确地发起异步请求

7831

扫码关注云+社区

领取腾讯云代金券