[进行中]记一次无解的 chrome extension 调试

[yubaoquan]

背景

vue.js devtools 是开发 vue 应用常用的一个调试工具, 以下简称 vue tool. 最近在项目开发过程中发现 chrome 的 devTools 面板(以下简称 devTools)中经常显示不出来 vue tool.

有人说如果打包模式是 prod, vue tool 不会激活. 于是使用了一个强制 vue tool 激活的油猴脚本. 但是问题仍然没有完全解决, vue tool 还是经常性的不出现在 devTools 中.

于是下载了 vue tool 的源码进行本地调试. 调试过程中了解到这个浏览器插件的结构分三个部分:

前端部分

这部分相当于运行在用户页面的作用域中, console 输出直接输出到 devTools, 调试起来比较方便

service worker 部分

这部分运行在 service worker 中, console 的日志输出到单独的一个地方, chrome 在插件管理页里提供了打开 service worker 控制台的功能, 所以这部分的日志也是可以看得见的

后端部分

这部分就比较麻烦了, 需要在 vue tool 的面板上右键 inspect 打开面板的 devTool, 才能在这个面板 devTool 中看到后端部分打印的日志

问题就出在这里. 插件先向浏览器注册一个后端的 html 文件 devtools-background.html, 此文件中引用一个 js 文件 devtools-background.js. 然后这个 js 文件中调用 chrome 的一个 API chrome.devtools.panels.create 来在 devTools 中创建此插件需要的 tab, 即 名为 Vue 的 tab.

既然 Vue tab 没有显示出来, 那么应该是 chrome.devtools.panels.create 这个函数没有调用或调用失败了. 需要调试这里, 首先要看逻辑有没有走进这个 js 文件, 需要打印一些日志来验证. 但是前面说过, 这是后端 js 文件, 它的输出不会直接输出到 devTools 中, 需要在插件在 devTools 中的面板上右键 inspect 才能打开它自己的 devTools. 但这个面板没有渲染出来, 就没有机会右键 inspect. 这就造成了一个死循环.

既然通过这个办法无法打开插件面板的 devTools, 有没有其他方法看它是否执行呢? 在这个 js 文件中, 发现它定义了两个向外发送消息 的函数, 函数中调用了 chrome.runtime.sendMessage. 发送了两个消息 'vue-panel-shown' 和 'vue-panel-hidden'. 在代码中发现, 接收消息的文件是 panel-visibility.ts. 于是在这个文件接收消息的地方, 注册消息监听的逻辑 加上了打印日志,然而调试时在三个 devTools 面板中都没有发现打印的日志. 也就是说注册消息监听的逻辑根本没有执行. 这样的话就算发出消息也不回被接收了.

写到这里, 我发现可以在后端 js 中声明这样一个方法向前端 devTools 中输出一些简易的日志

const logToFrontend = message => chrome.devtools.inspectedWindow.eval(`console.info(${JSON.stringify(message)})`)

又可以调了...

[yubaoquan]

初步结论是, vue devtools 在初始化的时候会做5次间隔1s的轮询, 检测是否在 iframe里.
而我的页面是在进行一些操作之后才会生成 iframe 的. 所以如果一开始打开 vue devtools, 等5秒过了再生成 iframe, vue devtools 自然探测不到 iframe
还有一点是, 开着 devtools 刷新页面, 似乎不会触发浏览器插件的再次刷新.