移动端中使用调试控制台 eruda
栏目分类：前端开发发布日期：2019-02-16 浏览次数：4586次  收藏

使用

一般移动端：在html head中引入移动端调试控制台代码并初始化：

<head>
	<meta charset="UTF-8">
	....
	<!-- 移动端调试控制台 -->
	<script src="https://cdn.bootcss.com/eruda/1.4.3/eruda.min.js"></script>
	<script>eruda.init();</script>
</head>

如下图：打开悬浮按钮即可看到控制台

如果是小程序，在onLaunch时开启debug,可以在真机中调出控制台：

App({
  
  onLaunch: function (options) {
    wx.setEnableDebug({
      enableDebug: true
    });
  },

});

安装

你可以通过npm来下载使用该工具：

npminstall eruda--save

然后在页面中引入以下脚本：

(function () { var src ='node_modules/eruda/dist/eruda.min.js'; if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') !='true') return; document.write('');})();

可以看到只有当url上带有eruda=true或本地存储active-eruda为true的时候，工具才会被加载并执行。其中设置面板有选项可以设置active-eruda使工具常驻，不用每次都在url上添加eruda=true。

注：该插件的文件gzip后大小约有50+kb，相比于项目页均js脚本量几kb来说还是太大，并不适合在现网环境加载影响页面载入速度。

功能面板介绍

Console面板

该面板会替换console对象中的log，error，info，warn，dir，time，timeEnd方法以不同的样式显示出来，同时默认会通过onerror捕获全局错误（可以在设置面板关闭），打出错误信息及其堆栈。当然，日志的清除与过滤也是支持的，还可以直接在该面板输入js脚本并在全局作用域下执行。该面板还内置了一些快捷指令来快速执行一些有用的功能，比如在页面载入jQuery或underscore，使用正则表达式过滤log等。

Elements面板

查看Dom状态对于调试工具自然是一个必不可少的功能。通过该工具，你无需连接PC端调试工具就能轻松查看DOM节点上的各个属性值，内容，应用的CSS样式。被查看的元素也会在页面上高亮，能够使你快速知晓DOM元素的margin，padding。

Network面板

Network面板通过performance接口以图表的形式展示页面的加载速度。计划在resource timing api得到广泛应用时再加入各个资源的加载情况，不过目前它仅仅只能得到页面的加载速度。

Resources面板

该面板主要用来展示localStorage，cookie，页面脚本，样式，图片等资源，同时能够对其执行一些简单的操作，如清除指定的localStorage条目。

Info面板

很多时候会需要查看复制浏览器上的指定信息，比如通过JsBridge获取到的用户Id，用于后台数据查错。又比如，测试碰到某些页面错误时，我们首先做的一件事经常是：把链接发给我看看，然而APP里并没有复制链接的选项:( 还有，一个页面在不同环境下需要有不同的表现，项目H5页面经常需要在不同APP里有不同表现以及调用不同jsApi。靠什么来区分？UA。然而有时候对某个版本UA检测不准确就会造成页面出BUG，这时候如果有个方便的方法能够快速查看到出错者的浏览器UA就太好了。

综上，Info面板默认会展示出url和user-agent两条信息，你也可以通过调用它的接口输出其它指定信息。

Snippets面板

Console面板可以执行js脚本，但在手机上输入代码体验实在不怎么样。利用该面板你可以添加一些方法以便于快速和多次触发它。Sinppets默认加入了两个脚本，为页面所有元素加border查看排版结构以及重刷页面。

Features面板

嗯，之前碰到过BUG，结果发现是APP的WebView没开启对localStorage的支持，所以有了该面板。它会检测一些常用的功能是否被浏览器所支持，不支持的话将以红色高亮进行显示。

自定义插件

Eruda本质上只是一个可拖拽的入口按钮加一个Tab组件，其中的每个面板都是一个独立的插件。所以，事实上你可以自行添加各种自定义的信息展示面板。这是一个很有用的特性，因为通用组件很难做到适应于各类需求，有很多时候你会想要去扩展它。比如，项目用于移动端测试环境切换的工具会在每个页面嵌入该插件用于不同环境的切换，同时显示ID便于查找单次请求所对应的完整HTTP记录