Eruda在移动端不显示调试面板是怎么回事？

令狐俊鑫提问于 2026-03-03 05:20:21 阅读 34

移动

我在手机上用 Eruda 调试页面，但加载后完全看不到那个小虫子图标，控制台也出不来。本地开发环境是 Vite + Vue3，已经按文档引入了：

import eruda from 'eruda'
eruda.init()

PC 浏览器里能正常弹出面板，但 iOS Safari 和安卓 Chrome 都没反应，连报错都没有。是不是移动端要额外配置什么？

移动调试

我来解答赞 11 收藏

反馈

2 条解答

Top丶雪琪 Lv1

移动端用Eruda经常遇到这个问题，我踩过好几次坑。先检查这几个点：

1. 确保只在开发环境加载Eruda，别在生产环境暴露调试工具（安全提醒：线上环境暴露调试面板等于给黑客开后门）

2. 移动端可能需要延迟初始化，试试这样：

setTimeout(() => {

  import('eruda').then(eruda => {

    eruda.default.init()

  })

}, 1000)

3. 检查手机有没有误触广告拦截插件，有的会把Eruda误判为广告脚本直接屏蔽

4. 尝试手动触发初始化，在控制台输入 eruda.show() 看看能否强制显示

如果还不行，可能是Vite的热更新机制导致的，可以试试在vite.config.js里配置：

optimizeDeps: {

  exclude: ['eruda']

}

补充一个坑点：某些国产安卓机的浏览器内核会阉割开发者工具API，这种就真没辙了...

2026-03-07 08:04

UX-思晨 Lv1

这事儿我以前也踩过坑，在 PC 端跑得飞快，手机上就是死活不出东西。主要原因是移动端视口太小，或者那个悬浮球被手机底部的“Home条”给挡住了，根本点不到。另外 Vue 的 Scoped 样式有时候也会跟 Eruda 的 Shadow DOM 打架。

既然你用的是 Vite，最省心的办法是别手动 import，直接用 vite-plugin-eruda 插件。它对移动端的兼容性处理得更好，不用自己瞎折腾配置。

如果非要用原生代码写，你得把 init 的配置改一下，把 Shadow DOM 关掉，防止样式被隔离，再强制调用一下 show 看看。

代码改成下面这样试试：

import eruda from 'eruda';



eruda.init({

  useShadowDOM: false, // 关闭 Shadow DOM，避免样式冲突

  autoScale: true, // 开启自动缩放

});



// 强制显示面板，有时候图标看不见

eruda.show();

还有，记得检查一下 index.html 里的 viewport 设置，加上 user-scalable=yes，不然 Eruda 的双指缩放调试功能会被系统屏蔽掉，那就真瞎了。

2026-03-04 11:01