如何在生产模式下为Chrome扩展启用Vue devtools？

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？

Answer 1

首先,在Chrome ext开发环境中使用Vue devtools.

经验

这些天我正在开发一个Chrome浏览器插件__VUE_DEVTOOLS_GLOBAL_HOOK__.我发现未定义.

虽然不是一个大问题,但我想解决它.我在网上搜索了很多信息.

例:

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

2. Vue.config.devtools设置为真

3.grant Vue Devtools ext文件访问

但一切都行不通.

解

我们知道,vue-devtools它是Vue生态系统的重要组成部分,但它目前与Web浏览器相关联.

但是现在有一个软件包提供了一个独立的vue-devtools应用程序,可以用来调试任何Vue应用程序而不管环境如何.现在,您可以调试在移动浏览器,Safari,本机脚本等中打开的应用程序,而不仅仅是桌面chrome或firefox.

这个软件包名称是vue-remote-devtools一个独立的电子外壳,用于远程调试Vue应用程序!

我们来试试吧:

按照README.md步骤,

1. 全局安装包:

   npm install -g @vue/devtools

2. 在你的终端运行: vue-devtools

   你会看到一个电子应用程序看起来像这样

3.将脚本标记注入Chrome扩展.html文件.

警告

由于Chrome对插件的内容安全政策(CSP)限制,Chrome扩展程序的网络请求可能会被阻止.

此时,您需要修改Chrome Ext配置文件manifest.js.

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

虽然您可以复制content_security_policy到相应的文件manifest.js,但我仍然希望您能找到CSP的内容:

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

最后

连接成功!

参考:

VUE-远程devtools

DevTools for Chrome扩展开发.