eruda操作

一个专门为手机网页前端设计的调试面板。

功能清单

1. 按钮拖拽，按钮面板大小设置。

2. 控制台：包括显示器、控制台日志，支持日志错误、信息、警告、目录、时间/时间结束、清除、计数、断言、表格；支持占位符，%自定义样式输出；支持按日志类型及正则式过滤；支持 JavaScript 脚本执行。

3. 元素面板：查看标​​签内容及属性；查看应用在 Dom 上的样式；支持页面元素高亮；支持点击点击地址；查看 Dom 上绑定的各类事件。

4. 网络面板：显示数据、返回请求、查看发送内容、返回内容等。

5. 资源面板：查看并清除localStorage、sessionStorage及cookie；查看页面加载脚本及样式文件；查看页面加载图片。

6. 来源面板：查看页面源码；html，css，js代码及json数据。

7. 信息面板：输出 URL 及用户代理；支持自定义输出内容。

8. Snippets 面板添加元素添加；添加按钮：发现页面；支持自定义代码截图。

使用方法

1. 通过CDN使用：

<script src="//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script>
<script>eruda.init();</script>

2. 通过npm安装

npm install eruda --save

• 在页面中加载脚本:

<script src="node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>

• JS文件对于移动端来说比较重（gzip后大概100kb）。建议通过url参数来控制是否加载调试器，例如：

;(function () {
    var src = '//cdn.jsdelivr.net/npm/eruda';
    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>');
})();

初始化时可以配置

• container: 插件初始化的 Dom，如果不设置默认创建 div 直接覆盖 html 根结点下面。
• 工具：指定要初始化哪些面板，默认加载所有。

let el = document.createElement('div');
document.body.appendChild(el);

eruda.init({
    container: el,
    tool: ['console', 'elements'],
    useShadowDom: true
});

插件

• 官方支持的插件如下

eruda-fps：展示页面的fps信息。
eruda-features：浏览器特性检测。
eruda-timing：展示性能资源数据。
eruda-memory：展示内存信息。
eruda-code：运行 JavaScript 代码。
eruda-benchmark：运行 JavaScript 性能测试。
eruda-geolocation：测试接口。
eruda-dom：浏览 dom 树。
eruda-orientation：测试重力感应接口。
eruda-touches：可视化屏幕触摸事件触发。

• 官网