访问官网
Github
文档
Eruda
移动浏览器控制台。
演示
在手机上访问：https://eruda.liriliri.io/
要在不同网站上尝试，请在浏览器地址栏执行以下脚本。
javascript:(function () { var script = document.createElement('script'); script.src="https://cdn.jsdelivr.net/npm/eruda"; document.body.append(script); script.onload = function () { eruda.init(); } })();
功能
- 控制台：显示JavaScript日志。
- 元素：检查DOM状态。
- 网络：显示请求状态。
- 资源：显示localStorage、cookie信息。
- 信息：显示url、用户代理信息。
- 代码片段：包含常用代码片段。
- 源码：Html、js、css源码查看器。
安装
你可以通过npm获取。
npm install eruda --save-dev
将此脚本添加到你的页面。
<script src="node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
JavaScript文件大小相当大（gzip压缩后约100kb），因此不适合包含在移动页面中。建议仅在url中设置eruda为true时加载eruda（http://example.com/?eruda=true），例如：
;(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>');
})();
如果你使用现代JavaScript工具，可以动态导入它。
if (import.meta.env.MODE === 'development') {
import('eruda').then(eruda => eruda.default.init());
}
配置
初始化时可以传入一个配置对象。
- container：容器元素。如果未设置，将直接在html根元素下添加一个元素。
- tool：选择你想要的默认工具，默认情况下将添加所有工具。
更多信息，请查看文档。
let el = document.createElement('div');
document.body.appendChild(el);
eruda.init({
container: el,
tool: ['console', 'elements']
});
插件
- eruda-monitor：显示页面fps和内存。
- eruda-features：浏览器功能检测。
- eruda-timing：显示性能和资源时序。
- eruda-code：运行JavaScript代码。
- eruda-benchmark：运行JavaScript基准测试。
- eruda-geolocation：测试地理位置。
- eruda-orientation：测试方向API。
- eruda-touches：可视化屏幕触摸。
- eruda-vue：Vue开发工具。
如果你想自己创建插件，请遵循这里的指南。
相关项目
- eruda-android：自动加载eruda的简单webview。
- chii：远程调试工具。
- chobitsu：Chrome开发工具协议JavaScript实现。
- licia：eruda使用的实用工具库。
- luna：eruda使用的UI组件。
- vivy：图标图像生成。
第三方
- eruda-pixel：UI像素还原工具。
- eruda-webpack-plugin：Eruda webpack插件。
- eruda-vue-devtools：Eruda Vue-devtools插件。
支持者
贡献
阅读贡献指南以了解开发设置说明。
