Eruda在移动端不显示控制台面板是怎么回事？

码农统宇提问于 2026-02-23 23:21:19 阅读 9

移动

我在用 Eruda 做移动端调试，按文档引入了脚本，但在手机浏览器里完全看不到那个小面板。本地开发环境是 Vite + Vue3，试过真机扫码和 Chrome 模拟器都不行，控制台也没报错。

代码是这么加的：

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

是不是我漏了什么配置？或者需要额外设置容器元素？

Eruda 移动调试

我来解答赞 1 收藏

反馈

1 条解答

司马宏骞 Lv1

我猜你大概率是没处理好 Eruda 的初始化时机，尤其在 Vue3 项目里用 Vite，打包后代码可能在 DOM ready 之前就执行了 eruda.init()，导致找不到挂载点。

最稳妥的做法是确保 DOM 加载完成后再初始化，比如这样写：

<script src="https://cdn.jsdelivr.net/npm/eruda"></script>

<script>

  document.addEventListener('DOMContentLoaded', function() {

    eruda.init();

  });

</script>

或者更保险点（比如你用了异步路由或懒加载组件），直接挂到 window.onload 也行：

<script src="https://cdn.jsdelivr.net/npm/eruda"></script>

<script>

  window.onload = function() {

    eruda.init();

  };

</script>

另外注意安全，别在生产环境误留 eruda 脚本，尤其是线上环境暴露调试面板有风险，建议加个环境判断：

<script src="https://cdn.jsdelivr.net/npm/eruda"></script>

<script>

  if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {

    eruda.init();

  }

</script>

或者用 Vite 的环境变量控制，比如 import.meta.env.DEV。

如果加了这些还是没显示，打开手机浏览器的开发者工具（比如 Chrome 远程调试），看下 network 面板确认 eruda.js 是否成功加载，有时候 CDN 被墙或者网络问题也会导致静默失败。

2026-02-23 23:27