【Vue3】eruda移动端控制台调试工具+动态引入（html通用）

★雨潇★

已于 2024-02-02 17:58:18 修改

阅读量795

点赞数 15

分类专栏： Vue.js js 文章标签： html vue.js javascript

于 2024-02-02 17:44:25 首次发布

本文链接：https://blog.csdn.net/yasyList/article/details/135998354

版权

Vue.js 同时被 2 个专栏收录

29 篇文章 2 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用Eruda库进行代码调试，同时提供两种模式：固定加载和根据字段动态加载。通过data-custom-attribute判断条件，实现按需加载，提升移动端性能。

摘要由CSDN通过智能技术生成

效果展示

pc 在这里插入图片描述
移动端

固定加载模式：

index.html引入文件

<script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.0.1/eruda.min.js"></script>
// 初始化
<script>eruda.init()</script>

！！！可直接在BootCDN下载，建议存到自己服务器。

Vue/html根据字段动态加载模式：

const data = {}  // data为后台数据

// 判断控制台开关
const scriptElement = document.querySelector(
  'script[data-custom-attribute="custom-value"]'  // 自定义一个script标签和属性
);

if (data.customString.includes("custom-yes")) { // 根据某个值判断引入,如果有就引入
  if (!scriptElement) { // 没有创建过才创建
    const initScript = document.createElement("script");
    initScript.setAttribute("data-custom-attribute", "custom-value");
    initScript.textContent = "eruda.init()";
    document.body.appendChild(initScript);
  }
} else {
  if (scriptElement) { // 没有就删除，防止有
    document.body.removeChild(scriptElement);
  }
}