How to enable Vue devtools in production mode for chrome extensions?

Question

I'm building a chrome extension, and using a vue-cli webpack config. I'd like to be able to use the vue devtools after running the npm run build command.

I tried to add Vue.config.devtools = true; in main.js, or change NODE_ENV: '"production"' to NODE_ENV: '"development"', but vue devtools is still not showing up.

What can I do to enable vue devtools in production mode?

Answer 1

First,use Vue devtools in Chrome ext Development environment is enabled.

Experience

These days I'm developing a Chrome browser plugin.I found that __VUE_DEVTOOLS_GLOBAL_HOOK__ undefined.

Although not a big problem, but I want to solve it.I have searched a lot of information online.

example:

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

2.set Vue.config.devtools to be true

3.grant Vue Devtools ext file access

but all doesn't work.

Solution

As we know, vue-devtools is an essential piece of the Vue ecosystem, but it is currently tied to a web browser.

But now There is a package provides a standalone vue-devtools application, that can be used to debug any Vue app regardless of the environment. Now you can debug your app opened in mobile browser, safari, native script etc. not just desktop chrome or firefox.

This package name is vue-remote-devtools, which is a standalone electron shell to remotely debug Vue apps!

Let's have a try:

Following the README.md steps,

1. Install the package globally:

   npm install -g @vue/devtools

2. run in your terminal: vue-devtools

   you will see a electron app appear like this

3.inject the script tag to your Chrome Extension .html file.

Warning

Due to Chrome's Content Security Policy (CSP) restrictions on plug-ins,Chrome Extension's web request may be blocked.

At this point you need to modify the Chrome Ext configuration file manifest.js.

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

Although you can copy content_security_policy to the corresponding file manifest.js, but I still hope you can find out what the CSP is:

What is Content Security Policy (CSP)

Finally

Connect Success！

Ref:

vue-remote-devtools

DevTools for Chrome Extension Development.

Answer 2

It looks like I have the problem because I'm trying to use vue devtools in Chrome extension. Unfortunately, it's impossible to use vue devtools because extension pages are served over chrome-extension://

Further reading: https://github.com/vuejs/vue-devtools/issues/120