当前位置：首页 > 行业动态 > 正文

eruda cdn

admin
行业动态
2025-02-04
4

eruda cdn是一个高效的内容分发网络，通过全球节点加速网站内容传输，提高访问速度和稳定性。

Eruda 是一个专为手机网页前端设计的调试面板，类似 Chrome DevTools 的迷你版，它提供了捕获 console 日志、检查元素状态、显示性能指标、捕获 XHR 请求、显示本地存储和 Cookie 信息、浏览器特性检测等功能。

使用方式

1、通过CDN使用：

直接在 HTML 页面中引入 Eruda 的 JS 文件：

 <script src="//cdn.bootcss.com/eruda/1.3.0/eruda.min.js"></script>
     <script>eruda.init();</script>

或者使用其他 CDN 链接，如 jsDelivr：

 <script src="//cdn.jsdelivr.net/npm/eruda"></script>
     <script>eruda.init();</script>

2、通过 npm 安装：

首先安装 Eruda：

eruda cdn

 npm install eruda --save

然后在页面中加载脚本：

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

功能介绍

1、Console：捕获所有的日志和错误，避免使用 alert 进行调试，还可以在控制台执行 JavaScript 代码。

2、Elements：列出页面上的所有元素，点击某个元素可以查看其属性、样式、盒子模型等详细信息，支持页面元素高亮和屏幕直接点击选取。

3、Network：捕获网络请求，查看发送数据、返回头、返回内容等信息，有助于前后端联调时定位问题。

eruda cdn

4、Resources：查看 Cookie、localStorage、sessionStorage 等信息，并执行清除操作，还可以查看当前页面加载的脚本和样式文件，以及图片等资源。

5、Info：输出 URL 信息、User Agent 以及其他手机系统信息，支持自定义输出内容。

FAQs

Q1: Eruda 是否支持自定义插件？

A1: 是的，Eruda 支持自定义插件，如果现有的插件不能满足需求，用户可以自己编写插件来扩展 Eruda 的功能。

eruda cdn

Q2: 如何动态加载 Eruda？

A2: 可以通过 JavaScript 动态加载 Eruda，可以在开发环境中通过一个标志位来控制是否加载 Eruda：

__DEBUG__ && loadJS('http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js', ()=>{
  eruda.init();
});

或者通过 URL 参数来控制：

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

小编有话说：Eruda 是一个非常实用的移动端调试工具，它提供了丰富的功能，可以帮助开发者更高效地进行移动端网页的开发和调试，无论是通过 CDN 还是 npm 安装，都可以方便地在项目中集成 Eruda，如果你还没有尝试过 Eruda，不妨现在就试试吧！