事情是这样子的，我打开我的插件评论页面时，突然看到一条评论
正常情况下应该是当屏幕捕获完成之后，会弹出一个编辑窗口并且加载用户的屏幕截取区域
但现在是窗口弹出来了，图片数据并没有加载成功
于是，我在我自己电脑上尝试复现这个问题
发现这个问题，只存在于生产环境，开发环境下载是没有问题的
但是问题又来了，我在生产环境下我应该如何去进行debug，寻找问题的源头？
因为在utools插件中，我不能像平时一样呼唤出devTools工具面板，也不能在terminal中查看相关的输出日志
定位问题
翻阅Commit
由于在线上无法使用devTools，我使用了一个笨办法来排查这个Bug
我在我发布的这个版本的commit之前一条一条进行打包测试
经过条条测试，终于在某一条commit中，发现了这个问题
我开始翻阅这些变动的文件（大海捞针），最后徒劳无功
Debug App
我开始向社区寻求帮助
eruda
eruda是一个用于在移动网页上进行前端开发和调试的轻量级工具，提供控制台、网络请求监控、元素查看、性能分析等功能
尝试了使用eruda工具进行排查
你猜怎么着，遇到了类似的问题
当我在开发环境下，eruda是可以正常使用的，但是到了生产环境无法正常显示出eruda的控制按钮
debugtron
debugtron是一个用于调试生产环境的electron应用工具
突然，社群里的出现了一位大佬，让我使用debugtron进行调试看看是出现了什么问题
于是，下载了最新版本的debugtron，进行调试
不出意外的话，就出意外了~
我使用debugtron进行调试utools的时候，出现了闪退的情况
经过和大佬一番交流，得知debugtron调试，是在启动应用的时候添加上命令行参数触发debug功能的，而utools内部可能阻止的进程调试方面的功能导致我们无法使用debugtron进行调试
感谢大佬，还帮我patch了一个调试utools的版本
我又进行了跑一遍插件，这次终于找到问题的源头了
原来问题出在项目里的preload.js中，我使用了第三方的依赖库(fs-extra)，在打包成插件的时候没有将它打包进去所导致的
而开发环境中，代码是在项目/dist文件夹里，是可以直接访问到node_modules文件夹里的依赖包的，所以在跑的时候没有出现问题
关于Patch版本
后面和大佬交流后，原来是启动electron应用的时候，可以添加上相应的debug参数，使应用呼出devTools面板，在生产环境中也能调试应用
而这个版本改动了启用应用的代码，将inspect参数取消
不过这会导致我们无法对主线程进行调试，但是问题也不大，因为我们是要调试插件（子窗口的数据）渲染进程
这是debugtron项目中的源码，代码位置在main/src/main/actions.ts
解决问题
现在已经得知是preload.js中没有依赖包所导致的错误，我们可以使用构建工具将preload.js中所需的依赖打包进preload.js即可
这里我选中了rollup作为打包工具，安装它和一些相关插件
也可以直接将第三方库的
min.js移动到项目里，但是这样子做的话，后续增加依赖会比较麻烦些
bash
pnpm install rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve在项目根目录中，新建rollup.config.mjs文件，作为rollup的配置文件
JavaScript
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
input: './electron/preload.js',
output: {
file: './dist/electron/preload.js',
format: 'cjs'
},
plugins: [nodeResolve(),commonjs() ],
external:['electron']
};这段代码的功能是将项目中的electron/preload.js文件进行一个打包操作，在打包的时候将我们所引用的依赖库也同时打包进去
在这里，我们不要把electron也打包进去，因为它到时要使用到的是utools中的electron，所以我们用external字段将它排除
修改后，当我们要构建插件的时候，需要多跑一下rollup指令进行处理
经过打包后的preload.js，依赖丢失的问题也就解决了😊