如何在Chrome扩展的生产模式下启用Vue开发工具？

Question

我正在开发一个Chrome扩展程序，使用vue-cli webpack配置。在运行npm run build命令后，我希望能够使用Vue Devtools。

我尝试将Vue.config.devtools = true;添加到main.js中，或者将NODE_ENV: '"production"'更改为NODE_ENV: '"development"'，但Vue Devtools仍未显示。

如何在生产模式下启用Vue Devtools？

- Alex Efremov

---

文件顶部是否设置了 Vue.config.devtools = true？同时检查是否安装了 AdBlock，我之前遇到过一些问题。 - Wanny Miarelli

Answer 1

首先，在 Chrome 扩展程序开发环境中使用 Vue devtools。

经历

这些天我在开发一个 Chrome 浏览器插件，但是发现 __VUE_DEVTOOLS_GLOBAL_HOOK__ 未定义。

虽然不是什么大问题，但我想解决它。我在网上搜索了很多资料。

例如：

1.打开 chrome-extension://<hash>/app.html

2.将 Vue.config.devtools 设置为 true

3.授权 Vue Devtools 扩展文件访问权限

但都没有起作用。

解决方案

我们知道，vue-devtools 是 Vue 生态系统中必不可少的一部分，但它目前只能在 Web 浏览器中使用。

但现在有一个包提供了一个独立的 vue-devtools 应用程序，用于调试任何 Vue 应用程序，而无论其所在的环境如何。现在你可以调试你在移动浏览器、Safari、Native Script 等中打开的应用程序，而不仅仅是桌面版的 Chrome 或 Firefox。

这个包的名字叫做 vue-remote-devtools，它是一个独立的 Electron Shell，用于远程调试 Vue 应用程序！

让我们来试试：

按照 README.md 中的步骤：

1. 全局安装该包：

   npm install -g @vue/devtools

2. 在终端中运行：vue-devtools

   你会看到出现一个 Electron 应用程序，就像这样

3.将脚本标签注入到 Chrome 扩展程序的 .html 文件中。

警告

由于 Chrome 对插件的内容安全策略 (CSP) 限制，Chrome Extension 的 Web 请求可能会被阻止。

此时，你需要修改 Chrome 扩展程序的配置文件 manifest.js。

content_security_policy: "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'"

虽然您可以将content_security_policy复制到相应的文件manifest.js中，但我仍希望您能了解CSP是什么：

什么是内容安全策略 (CSP)

最后

连接成功！

参考资料：

vue-remote-devtools

针对Chrome扩展开发的DevTools。

- John Trump

---

在做了所有这些之后，它对我仍然不起作用，连接后立即断开。只有降级到vue-devtools@^5.1.4之后，它才终于工作了。 - Freddy Muskelberg

我该如何修改 manifest.js 文件？ - Ahmed Mamdouh

@AhmedMamdouh 这里有什么问题吗？ - John Trump

Answer 2

似乎我有问题，因为我试图在Chrome扩展中使用Vue开发工具。不幸的是，由于扩展页面是通过chrome-extension://提供服务的，所以无法使用Vue开发工具。

进一步阅读：https://github.com/vuejs/vue-devtools/issues/120

- Alex Efremov