eruda

<div align="center"> <a href="https://eruda.liriliri.io/" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/f7688360-6d84-4190-86e7-a1a0e7a83a9d.png" width="400"> </a> </div> <h1 align="center">Eruda</h1> <div align="center">

移动浏览器控制台。

</div> <img src="https://eruda.liriliri.io/img/screenshot.jpg" style="width:100%">

演示

在手机上访问：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>

它也可在jsDelivr和cdnjs上获取。

<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插件。

支持者

<a rel="noreferrer noopener" href="https://opencollective.com/eruda" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/bf97dc9e-6e20-4ca9-8b85-fbb83cdc3752.svg?width=890"></a>

贡献

阅读贡献指南以了解开发设置说明。