移动网页调试神器Erdua使用技巧
做移动端Web开发的一大痛点就是,在真机运行下无法查看console.log日志和其他信息如网络请求、显示本地存储等信息。如果网页是运行在手机浏览器中还算好,可以把网址在电脑上打开查看console信息,但是如果是做APP的内嵌H5页面,那就只能靠开发阶段在浏览器模拟环境中尽量没有Bug,但是,一旦H5上线后报错那就比较麻烦了,而且还依赖APP环境才能跑的网页,更加难以查找问题。如果让移动端也拥有类似Chrome DevTools工具那岂不是很愉快么?
vConsole便是这样一款很棒的移动端DevTools工具,由大厂企鹅出品。但本文把他定位为男二号,今天的主角男一号是: Erdua !vConsole的同类。如果你不知道怎么在移动端调试网页,那么本篇文章对你很有帮助,如果你是vConsole的用户,那么你也可尝试一下Erdua,如果你是移动端网页开发骨灰级玩家,那么可以选择低调的忽略本文。
Erdua是谁?
大家好,给大家介绍一下,这是我的…..。Eruda 是一个专为手机网页前端设计的调试面板,类似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。
GitHub地址为: https://github.com/liriliri/eruda ,颜值和技能都很棒的Erdua:
使用技巧
这才是本文重点。
Erdua的基本使用方法推荐使用CDN和可配置参数的形式,在页面引入如下代码:
;(function (){ var src = //cdn.bootcss.com/eruda/1.2.4/eruda.min.js; if (!/eruda=true/.test(window.location) localStorage.getItem(active-eruda) != true) return; document.write( scr + ipt src=" + src + " /scr + ipt ); document.write( scr + ipt eruda.init(); /scr + ipt ); })();
eruda.init(); 里面可以传入要初始化哪些面板,默认加载所有。
这样使用方式没有错,但是如果Erdua要跟着发布到线上的话,那我们要删除这段代码?因为这样会不管你需不需要调试Erdua都会立即加载,在页面出现Erdua的图标。我的目标是,Erdua可以保留在页面里,无论什么环境,只要我们想呼唤它出现的时候它才出现,不需要它的时候它只是一段不会生效的普通代码。
我想到的办法是:首先把上述引入代码的 src 放到 if 里,同时把 localStorage 改为 sessionStorage , active-eruda 参数也可以改个更短的名字,改后的代码如下:
if (!/eruda=true/.test(window.location) || sessionStorage.getItem(eruda) != 0) return;
这段代码的意思是如果URL中有参数 eruda=true 或者sessionStorage中 eruda 的值大于0才加载Erdua。这样的好处是,我们需要调试的时候可以在网页URL后面加个参数即可,不需要调试的它不会加载。
然而,这在开发阶段可以这样做比较好,但是在线上环境可能要加URL参数比较麻烦。于是我想到了在页面中点击某个元素10次再加载Erdua,点击10次或者更多次,然后在sessionStorage中写入 eruda=yes ,然后刷新当前页。相反,再点击10次关闭Erdua。用这样比较隐藏的方式开启或关闭Erdua,这样线上环境也可以自由开启或关闭Erdua了。
例子:假如有这样的一个页面,里有一个标题文字
h2 ——规则详情—— /h2 div ..... /div
那么我们可以在 h2 标签上绑定一个 click 事件,加入方法名叫 showErdua
h2 /span>"showErdua" ——规则详情—— /h2 div ..... /div script var count = 0; function showErdua(){ if (count = 10) { var erdua = sessionStorage.getItem(erdua); if (!erdua || erdua === no){ sessionStorage.setItem(eruda, yes) } else { sessionStorage.setItem(eruda, no) } location.reload() } count++ /script
这样点击规则详情10次就可以唤起Erdua了,再点击10次就关闭Erdua了,反正我觉得这样挺好的。
原文发布时间为:2017-10-17
本文作者:佚名
本文来自云栖社区合作伙伴“51CTO”,了解相关信息可以关注。
Eolink 和 Apifox 哪个好用?深度分析爱了这款神器 对于Eolink和Apifox哪个好?Apifox和Eolink有什么区别?更简单的操作可以完成相同的功能,在效果上也做到更优秀,何况 Apifox 完全免费,因此综合下来,推荐 Apifox。
前端答疑-chrome开发者工具正确食用-调试代码 之前写过前端答疑-chrome开发者工具正确食用-看网页源码,其中涉及到了 Sources 和 Network 两个标签。 不曾想现在的世界越来越看不懂了 昨天吧,一个朋友突然联系我了(应该是校友吧,不过我没见过本人,大我十届?我也是奔三的人了,突然好难过)。 问我360 浏览器如何调试 js。这个时候应该配图了[黑人问号脸]。调试应该是每个开发必会的技能吧,即使不会,难道没有网络吗?网上连教程都没有吗? 那么好了,基于上面的吐槽,我们开始今天内容。
还在用 Swagger?试试这款神器,功能真心强大! smart-doc是一款同时支持JAVA REST API和Apache Dubbo RPC接口文档生成的工具,smart-doc在业内率先提出基于JAVA泛型定义推导的理念,完全基于接口源码来分析生成接口文档,不采用任何注解侵入到业务代码中。 你只需要按照java-doc标准编写注释, smart-doc就能帮你生成一个简易明了的Markdown、HTML5、Postman、Collection2.0+、OpenAPI 3.0+的文档。
60 个相见恨晚的神器工具 让WebP图片下载为PNG格式,从Github批量下载表情包,一键滚动截屏整个网页,助你快速成为B站老司机,一键分析网站技术栈,翻录网页视频神器等等。这些功能,都能在Chrome中使用件简单实现。不信?你往下看就行了。最近,GitHub上有个名为ChromeAppHeroes的项目登上了趋势榜。
相关文章
- 网页端的消息接收方式
- 009网页状态码302和307的区别
- 如何批量修改网页 更新网站 一键保存 windows查看和排序
- 网页3D效果库Three.js初窥
- 扫雷网页游戏部分代码
- web网页版苹果计算器(HTML、CSS、JavaScript实现)
- Python爬虫:scrapy利用splash爬取动态网页
- 微信网页授权
- 太赞了,竟然用SpringBoot打造一款网页版的IM,进行聊天...
- 在网页中在线浏览ppt文档
- 值得一看!22个鼓舞人心的扁平化网页设计作品
- 网页计时访问器application对象
- node--puppeteer网页截屏
- 抽取网页中的主要内容
- Vue实现网页首屏加载动画、页面内请求数据加载loading
- 神奇的go语言(网页下载)
- 在sublime text中搭建完美可交互的网页前端编写环境