如何在生产模式下为 chrome 扩展启用 Vue devtools？
How to enable Vue devtools in production mode for chrome extensions?
我正在构建一个 chrome 扩展，并使用 vue-cli webpack 配置。我希望能够在 运行ning npm 运行 build 命令后使用 vue devtools。
我尝试在main.js中添加Vue.config.devtools = true;，或将NODE_ENV: '"production"'更改为NODE_ENV: '"development"'，但vue devtools仍然没有显示。
如何在生产模式下启用 vue devtools？
看来我遇到了问题，因为我正在尝试在 Chrome 扩展中使用 vue devtools。不幸的是，不可能使用 vue devtools，因为扩展页面是通过 chrome-extension://
提供的
首先，在Chrome ext 开发环境中使用Vue devtools
经验
这几天在开发Chrome浏览器plugin.I发现__VUE_DEVTOOLS_GLOBAL_HOOK__未定义。
虽然不是什么大问题，但是我想解决it.I网上查了很多资料
示例：
1.open chrome-extension://<hash>/app.html
2.set Vue.config.devtools 为真
3.grant Vue Devtools ext 文件访问
但都不行。
解决方案
众所周知，vue-devtools 是 Vue 生态系统的重要组成部分，但它目前与网络浏览器绑定。
但是现在有一个包提供了一个独立的 vue-devtools 应用程序，可以用来调试任何 Vue 应用程序，而不管环境如何。现在您可以调试在移动浏览器、Safari、本机脚本等中打开的应用程序，而不仅仅是桌面 chrome 或 Firefox。
这个包名是vue-remote-devtools，它是一个独立的电子shell，用于远程调试Vue应用程序！
我们来试试看：
按照 README.md 步骤，
全局安装包：
npm install -g @vue/devtools
运行 在您的终端中：vue-devtools
你会看到一个electron app是这样的
3.inject 您的 Chrome 扩展 .html 文件的脚本标签。
警告
由于 Chrome 对 plug-ins 的内容安全策略 (CSP) 限制，Chrome 扩展程序的 Web 请求可能会被阻止。
此时需要修改ChromeExt配置文件manifest.js.
content_security_policy: "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'"
虽然你可以复制content_security_policy到对应的文件manifest.js，但还是希望你能查清楚CSP是什么：
What is Content Security Policy (CSP)
终于
连接成功！
参考：
我正在构建一个 chrome 扩展，并使用 vue-cli webpack 配置。我希望能够在 运行ning npm 运行 build 命令后使用 vue devtools。
我尝试在main.js中添加Vue.config.devtools = true;，或将NODE_ENV: '"production"'更改为NODE_ENV: '"development"'，但vue devtools仍然没有显示。
如何在生产模式下启用 vue devtools？
看来我遇到了问题，因为我正在尝试在 Chrome 扩展中使用 vue devtools。不幸的是，不可能使用 vue devtools，因为扩展页面是通过 chrome-extension://
提供的首先，在Chrome ext 开发环境中使用Vue devtools
经验
这几天在开发Chrome浏览器plugin.I发现__VUE_DEVTOOLS_GLOBAL_HOOK__未定义。
虽然不是什么大问题，但是我想解决it.I网上查了很多资料
示例：
1.open chrome-extension://<hash>/app.html
2.set Vue.config.devtools 为真
3.grant Vue Devtools ext 文件访问
但都不行。
解决方案
众所周知，vue-devtools 是 Vue 生态系统的重要组成部分，但它目前与网络浏览器绑定。
但是现在有一个包提供了一个独立的 vue-devtools 应用程序，可以用来调试任何 Vue 应用程序，而不管环境如何。现在您可以调试在移动浏览器、Safari、本机脚本等中打开的应用程序，而不仅仅是桌面 chrome 或 Firefox。
这个包名是vue-remote-devtools，它是一个独立的电子shell，用于远程调试Vue应用程序！
我们来试试看：
按照 README.md 步骤，
全局安装包：
npm install -g @vue/devtools运行 在您的终端中：
vue-devtools你会看到一个electron app是这样的
3.inject 您的 Chrome 扩展 .html 文件的脚本标签。
警告
由于 Chrome 对 plug-ins 的内容安全策略 (CSP) 限制，Chrome 扩展程序的 Web 请求可能会被阻止。
此时需要修改ChromeExt配置文件manifest.js.
content_security_policy: "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'"
虽然你可以复制content_security_policy到对应的文件manifest.js，但还是希望你能查清楚CSP是什么：
What is Content Security Policy (CSP)
终于
连接成功！
参考：