在移动端调试中Eruda如何帮我解决棘手问题并提升效率

Eruda调试工具的坑，我差点没爬出来

前几天在做移动端调试的时候，遇到一个特别诡异的问题。项目里集成了Eruda这个调试神器，本来用得好好的，突然发现某些页面上它完全不生效了。折腾了半天才发现问题出在哪，这里给大家分享下踩坑经历。

先说解决方案吧，省得大家着急：

if (typeof eruda !== 'undefined') {
    eruda.init();
} else {
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/eruda';
    document.body.appendChild(script);
    script.onload = () => {
        eruda.init();
    };
}

为啥会遇到这个问题？

事情是这样的。我们的项目用了动态加载的方式引入Eruda，按理说应该没问题。但是在某些页面上，我发现控制台一片空白，连Eruda的初始化按钮都没有。这里我踩了个坑，一开始以为是网络问题，各种换CDN源试了都不行。

后来仔细检查代码才发现，罪魁祸首是webpack的Tree Shaking机制。因为我们在代码里写了import语句，但又设置了按需加载，导致打包时把Eruda给摇树优化掉了。这种情况下，即使手动添加script标签也没用，因为全局变量已经被破坏了。

排查过程中的那些坑

说来惭愧，这个问题我花了整整一天才搞定。期间踩了几个大坑：

• 一开始以为是HTTPS的问题，换了好几个CDN源，甚至还自己搭了个本地服务，结果都没用
• 然后怀疑是浏览器兼容性问题，在Chrome、Safari、Firefox上都试了一遍，发现症状一模一样
• 接着又以为是其他库的冲突，把所有第三方库都注释掉测试，还是不行

最后实在没办法，只能从最基础的开始排查。这才发现原来是webpack配置惹的祸。这里提醒大家一句：动态加载和静态import千万不要混用，很容易出问题。

核心代码就这几行

最终的解决方案其实很简单，就是上面那段代码。不过为了确保万无一失，我还加了一些额外的保护措施：

(function() {
    if (window.location.hostname === 'jztheme.com') return; // 生产环境不加载

    const isDebug = localStorage.getItem('debug_mode') === 'true';
    if (!isDebug) return;

    if (typeof eruda === 'undefined') {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/eruda';
        document.body.appendChild(script);
        script.onload = () => {
            eruda.init();
        };
    } else {
        eruda.init();
    }
})();

这段代码有几个要点：

• 通过localStorage控制调试模式开关，方便随时开启关闭
• 判断生产环境直接return，避免不必要的性能损耗
• 双重检测eruda是否存在，确保万无一失

一些有意思的技术细节

说到Eruda，其实它的工作原理挺有意思的。本质上就是一个浮动的iframe容器，把各种调试工具集成进去。它的init方法会创建一个全屏覆盖的div，里面包含了各个功能模块。

这里要注意的是，Eruda的样式是通过js动态插入的，所以如果页面有严格的Content Security Policy（CSP）限制，可能会导致样式加载失败。我当时就在一个启用了严格CSP的项目里遇到过这个问题，最后通过配置unsafe-inline才解决。

还有一个小技巧：Eruda默认会显示所有的面板，但其实在移动端我们只需要几个常用的就够了。可以通过下面这种方式定制：

eruda.init({
    tool: ['console', 'elements', 'network']
});

这样可以减少不必要的资源消耗，让调试体验更流畅。

改完后还有一两个小问题

虽然主要问题解决了，但还是有两个小瑕疵：

• 首次加载时偶尔会出现短暂的白屏，大概200ms左右
• 在某些低端机型上，打开Eruda会导致页面卡顿，特别是切换面板的时候

这两个问题目前还没找到完美的解决方案。不过考虑到调试工具本来就是在开发阶段使用的，这些问题影响不大，暂时就这样了。

以上是我个人对这个Eruda问题的完整讲解，有更优的实现方式欢迎评论区交流。顺便说句题外话，移动调试这块水还挺深的，后续我会继续分享这类实战经验。