手机web调试神器Erdua小技巧

手机web开发的痛点之一就是在真机运行时无法查看console.log日志等网络请求等信息，无法显示本地存储。如果网页运行在手机浏览器中，还不错，可以在电脑上打开网址查看控制台信息，但是如果是app内嵌的H5页面，那就只能靠开发阶段了在浏览器模拟环境中尽量避免。Bug，但是一旦H5上线报错就比较麻烦，对于依赖APP环境运行的网页更难发现问题。如果移动端也有类似ChromeDevTools的工具该多好？vConsole就是企鹅出品的一款非常棒的移动端DevTools工具。但本文将他定位为男二号，而今天领衔的男一号是：同类型的Erdua!vConsole。如果你不知道如何在移动端调试网页，那么这篇文章对你很有帮助。如果你是vConsole用户，你也可以试试Erdua。如果你是移动web开发的铁杆玩家，可以选择悄悄忽略这篇文章。埃尔杜瓦是谁？大家好，给大家介绍一下，这是我的...Eruda是一款专为移动网页前端设计的调试面板，类似于迷你版的DevTools，主要功能包括：控制台日志抓取、元素状态查看、性能展示指标，捕获XHR请求，显示本地存储和cookie信息，浏览器特性检测等。GitHub地址为：https://github.com/liriliri/eruda，颜值高技能的Erdua：使用技巧是本文的重点。Erdua的基本使用，推荐使用CDN，可配置参数，在页面引入如下代码：;(function(){varsrc='//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';if(!/eruda=true/.test(window.location)&&localStorage.getItem('active-eruda')!='true')return;document.write('');document.write('eruda.init();');})();埃鲁达。在里面（）;初始化哪些面板可以传入，默认全部加载。这种使用方式没有什么问题，但是如果要让Erdua上线，那么我们需要删除这段代码吗？因为无论你是否需要调试Erdua，它都会立即加载，并且Erdua的图标会出现在页面上。我的目标是让Erdua能够一直留在页面中，无论什么环境，只有在我们要调用的时候才会出现，只是一段普通的代码，不需要的时候不会生效。我想到的办法是：先将上述导入代码的src放到if中，同时将localStorage改为sessionStorage，active-eruda参数也可以改成更短的名字。修改后的代码如下：;(function(){if(!/eruda=true/.test(window.location)||sessionStorage.getItem('eruda')!='0')return;varsrc='//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';document.write('document.write('})();这段代码的意思是如果url中有参数eruda=true或者sessionStorage中eruda的值大于0，就会加载Erdua。这样的好处是，当我们需要调试的时候，可以在网页的url后面加一个参数，不加载就不会加载需要调试。不过在开发阶段这样做比较好，但是在线上环境添加url参数可能会比较麻烦。于是想到在页面中点击10次某个元素，然后加载Erdua，点击10次以上，然后在sessionStorage中写eruda=yes，然后刷新当前页面。相反，再单击10次以关闭Erdua。以这种相对隐蔽的方式开启或关闭Erdua，让线上环境也可以自由开启或关闭Erdua。例子：如果有这样一个页面，有一个标题文字

——规则详情——