VueJS devtools not loading

Hey, I tried to install the vuejs devtool but I ran into some issues. The install step goes well and I have the confirmation message appearing in my console, but when I open the developer tools I can’t find the vue devtools.

I tried with the given VUEJS_DEVTOOLS and by inserting the id of the chrome extension directly. I also tried putting the code before and after the window creation.

When I try to install other tools, like REDUX_DEVTOOLS it works, the tab is visible in the developer tools.

I have Windows 10 20H2, with dark mode disabled and Electron 11.1.1.

[blakewatson]

For anyone who comes across this problem, here is the workaround that worked for me.

It seems the problem is that extensions don’t load properly if the page that you are requesting is a file:// URL (https://github.com/electron/electron/issues/24011). What we can do is see if we are running in development and, if we are, load our main index file using win.loadURL rather than win.loadFile.

I’m doing this on app ready:

const isDevEnvironment = process.env.NODE_ENV === "development";

if (isDevEnvironment) {
  // Open the DevTools.
  installExtension(VUEJS_DEVTOOLS)
    .then((name) => {
      console.log(`Added Extension:  ${name}`);
      win.webContents.openDevTools("bottom");
    })
    .catch((err) => console.log("An error occurred: ", err));

  win.loadURL('http://localhost:8080');
  return win;
}

In order to serve my page at http://localhost:8080 I’m using PHP’s built-in development server:

php -S localhost:8080

You could use whatever method you want. Note that if I’m not in a development environment, then I’m loading the index file the usual way with win.loadFile.

[Lothindir]

Finally got it working. I had to add the repository as a package as mentioned here. I then added { loadExtensionOptions : { allowFileAccess : true}} as the second argument of the installExtension() function. As I’m using VUEJS_DEVTOOLS I had to remove some directories and keys from the extension (_metadata and some keys in manifest.json). It works with electron v12.0.2 (electron@latest).

Still waiting for the official release @MarshallOfSound 😉