小技巧|移动端网页调试神器Eruda使用技巧

xzavier 发布于2019-08-21 17:19 / 2203人阅读

摘要：做移动端开发的一大痛点就是，在真机运行下无法查看日志和其他信息如网络请求显示本地存储等信息。是一个专为手机网页前端设计的调试面板，类似的迷你版，其主要功能包括捕获日志检查元素状态显示性能指标捕获请求显示本地存储和信息浏览器特性检测等等。

做移动端Web开发的一大痛点就是，在真机运行下无法查看console.log日志和其他信息如网络请求、显示本地存储等信息。如果网页是运行在手机浏览器中还算好，可以把网址在电脑上打开查看console信息，但是如果是做APP的内嵌H5页面，那就只能靠开发阶段在浏览器模拟环境中尽量没有Bug，但是，一旦H5上线后报错那就比较麻烦了，而且还依赖APP环境才能跑的网页，更加难以查找问题。如果让移动端也拥有类似Chrome DevTools工具那岂不是很愉快么？

vConsole便是这样一款很棒的移动端DevTools工具，由大厂企鹅出品。但本文把他定位为男二号，今天的主角男一号是：Eruda！vConsole的同类。如果你不知道怎么在移动端调试网页，那么本篇文章对你很有帮助，如果你是vConsole的用户，那么你也可尝试一下Eruda，如果你是移动端网页开发骨灰级玩家，那么可以选择低调的忽略本文。

Eruda是谁？

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

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

详细介绍可以戳这里产看，我就不赘述了

使用技巧

这才是本文重点。Eruda的基本使用方法推荐使用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("");
    document.write("eruda.init();");
})();

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

这样使用方式没有错，但是如果Eruda要跟着发布到线上的话，那我们要删除这段代码？因为这样会不管你需不需要调试Eruda都会立即加载，在页面出现Eruda的图标。我的目标是，Eruda可以保留在页面里，无论什么环境，只要我们想呼唤它出现的时候它才出现，不需要它的时候它只是一段不会生效的普通代码。

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

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

这段代码的意思是如果URL中有参数eruda=true或者sessionStorage中eruda的值为true才加载Eruda。这样的好处是，我们需要调试的时候可以在网页URL后面加个参数即可，不需要调试的它不会加载。

然而，这在开发阶段可以这样做比较好，但是在线上环境可能要加URL参数比较麻烦。于是我想到了在页面中点击某个元素10次再加载Eruda，点击10次或者更多次，然后在sessionStorage中写入eruda=true，然后刷新当前页。相反，再点击10次关闭Eruda。用这样比较隐藏的方式开启或关闭Eruda，这样线上环境也可以自由开启或关闭Eruda了。

例子：假如有这样的一个页面，里有一个标题文字

——规则详情——

.....

那么我们可以在h2标签上绑定一个click事件，加入方法名叫showEruda

——规则详情——

.....

这样点击规则详情10次就可以唤起Eruda了，再点击10次就关闭Eruda，反正我觉得这样挺好的。

不知道大家都是怎么用的呢？

GPU云服务器云服务器调试技巧 javascript调试技巧小技巧小技巧全集

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89385.html

Eruda 一个可能被人遗忘的调试神器

摘要：引言日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的，既然有问题，那就也就有调试，说到调试工具，大家可能对于还有远程调试等比较熟悉，甚至有些是我可能也没有用过的这里喷一句吧，谁都别给我提啊，那个不叫调试工具，那叫坑爹神器，话说最近不 showImg(https://segmentfault.com/img/bVbk8zn?w=1008&h=298); 引言　　日常工作中再牛...

mingzhong 2019-08-23 14:15 评论0 收藏0
android移动端调试—前端开发工具Eruda

摘要：通过使用通过安装文件对于移动端来说略重后大概。建议通过参数来控制是否加载调试器，比如初始化时可以传入配置用于插件初始化的元素，如果不设置，默认创建作为容器直接置于根结点下面指定要初始化哪些面板，默认加载所有示例 Eruda 通过CDN使用： eruda.init(); 通过npm安装： n...

jeyhan 2021-09-09 09:32 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0