移动网页调试神器Erdua使用技巧

沙龙晃荡 | 去哪儿、陌陌、ThoughtWorks在主动化运维中的实践！10.28不见不散！

大年夜家好，给大年夜家介绍一下，这是我的…..。Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其重要功能包含：捕获 console 日记、检查元素状况、显示机能指标、捕获XHR请求、显示本地存储和 Cookie 信息、浏览器特点检测等等。

应用技能

做移动端Web开辟的一大年夜痛点就是，在真机运行下无法查看console.log日记和其他信息如收集请求、显示本地存储等信息。如不雅网页是运行在手机浏览器中还算好，可以把网址在电脑上打开查看console信息，然则如不蚜?鲻APP的内嵌H5页面，那就只能靠开辟阶段在浏览器模仿情况中尽量没有Bug，然则，一旦H5上线后报错那就比较麻烦了棘并且还依附APP情况才能跑的网页，加倍难以查找问题。如不雅让移动端也拥有类似Chrome DevTools对象那岂不是很高兴么?

移动网页捣言神器Erdua应用技能

vConsole就是如许一款很棒的移动端DevTools对象，由大年夜厂企鹅出品。但本文把他定位为男二号，今天的主角男一号是： Erdua !vConsole的同类。如不雅你不知道怎么在移动端调试网页，那么本篇文┞仿对你很有赞助，如不雅你是vConsole的用户，那么你也可测验测验一下Erdua，如不雅你是移动端网页开辟骨灰级玩家，那么可以选择低调的忽视本文。

Erdua是谁?

GitHub地址为： https://github.com/liriliri/eruda ，颜值和技能都很棒的Erdua：

移动网页捣言神器Erdua应用技能

这才是本文重点。

Erdua的根本应用办法推荐应用CDN和可设备参数的情势，在页面惹人如下代码：

;(function (){  
if (!/eruda=true/.test(window.location) || sessionStorage.getItem('eruda') != '0') return;  
var src = '//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';  
document.write('  
document.write('  
})();

;(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=http://mobile.51cto.com/"' + src + '"></scr' + 'ipt>'); 
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>'); 
})();

eruda.init(); 琅绫擎可以传入要初始化哪些面板，默认加载所有。

如许应用方法没有错，然则如不雅Erdua要跟着宣布到线上的话，那我们要删除这段代码?因为如许会不管你需不须要调试Erdua都邑急速加载，在页面出现Erdua的搁笔。我的目标是，Erdua可以保存在页面里，无论什么情况，只要我们想呼唤它出现的时刻它才出现，不须要它的时刻它只是一段不会生效的通俗代码。

我想到的办法是：起首把上述惹人代码的 src 放到 if 里，同时把 localStorage 改为 sessionStorage ， active-eruda 参数也可以改个更短的名字，改后的代码如下：

这段代码的意思是如不雅URL中有参数 eruda=true 或者sessionStorage中 eruda 的值大年夜于0才加载Erdua。如许的好处是，我们须要调试的时刻可以在网页URL后面加个参数即可，不须要调试的它不会加载。

然而，这在开辟阶段可以如许做比较好，然则在线上情况可能要加URL参数比较麻烦。于是我想到了在页面中点击某个元素10次再加载Erdua，点击10次或者更多次，然后在sessionStorage中写入 eruda=yes ，然后刷新当前页。相反，再点击10次封闭Erdua。用如许比较隐蔽的方法开启或封闭Erdua，如许线上情况也可以自由开启或封闭Erdua了。

1/2 1 2 下一页尾页

　　推荐阅读

　　踢开绊脚石：微服务难点之服务调用的解决方案

沙龙晃荡 | 去哪儿、陌陌、ThoughtWorks在主动化运维中的实践！10.28不见不散！微办事已经成为越来越多企业IT>>>详细阅读

本文标题：移动网页调试神器Erdua使用技巧

地址：http://www.17bianji.com/lsqh/37999.html

1/2 1