vue-cli-plugin-electron-builder: Vue JS Dev Tools - Not detecting VUE DOM

I am using Electron 5 and ran into this issue as well. Nothing was being recognized by the extension, including the DOM and Vuex state.

I fixed it by closing the devtools window and reopening it (which can be done quickly by hitting the keybinding twice, e.g. Ctrl+Shift+I). It then recognized both the state and the DOM, and it continued working through hot reloads.

As an experiment, I tried delaying the initial openDevTools() call by several seconds, but it still did not work until I relaunched devtools.

Same here. Opening an closing devtools fixes it, but all tabs are empty when electron loads the window.

What was the resolution to this problem? All of a sudden the thread says it works and it’s closed, but I’m not seeing what fixed it.

I encounter the same problem. I’m doing Vue.js development without electron in parallel and didn’t faced with this issue.

You could try putting Vue.config.devtools = process.env.NODE_ENV === 'development'; in main.js before calling new Vue (https://github.com/vuejs/vue-devtools/issues/68). Otherwise, this might be due to using a non standard protocol (I looked in the extension’s manifest.json and it has this line: "permissions": [ "http://*/*", "https://*/*", "file:///*", "contextMenus" ].

I think this issue has been solved, either from a vue devtools or electron update. Can someone confirm so this issue can be closed?

@travis5491811 No luck

Nope - sorry nothing for me. Still broken.

I was having the same problem - and it was fixed adding the vue.config.js code:

module.exports = {
	configureWebpack: {
		devtool: 'source-map'
	}
}

I only got this to work in electron 5. The comments say that it will not work in electron 6. FYI.

Good luck!

A callback hell dance to automatically close and reopen vue devtools, to make it detect the Vue application in electron. The timeout would probably need to be adjusted to the speed of your computer/browser.

const openVueDevTools = () =>
  mainWindow.webContents.devToolsWebContents.executeJavaScript(
    'DevToolsAPI.showPanel("chrome-extension://vue-js-devtoolsVue")',
  );
mainWindow.webContents.once('dom-ready', () => {
  mainWindow.webContents.openDevTools();
  mainWindow.webContents.once('devtools-opened', () => {
    setTimeout(() => {
      openVueDevTools();
      setTimeout(() => {
        mainWindow.webContents.closeDevTools();
        setTimeout(() => {
          mainWindow.webContents.openDevTools();
          mainWindow.webContents.once('devtools-opened', () => {
            setTimeout(openVueDevTools, 500);
          });
        }, 100);
      }, 500);
    }, 500);
  });
});

Adding the

Vue.config.devtools = process.env.NODE_ENV === 'development';

before new Vue(...) in main.js solved my problem 😃 but just when I run the project from the Terminal by

npm run electron:serve

---

But If I run the project by VS Code Debug the problem is still there and Vue DevTools is empty again 😦

Additional information:

tasks.json:

{	
	"version": "2.0.0",
	"tasks": [
	  {
	    "label": "electron-debug",
	    "type": "process",
	    "command": "./node_modules/.bin/vue-cli-service",
	    "windows": {
		"command": "./node_modules/.bin/vue-cli-service.cmd"
	    },
	    "isBackground": true,
	    "args": ["electron:serve", "--debug"],
	    "problemMatcher": {
		"owner": "custom",
		"pattern": {
		  "regexp": ""
		},
		"background": {
		  "beginsPattern": "Starting development server\\.\\.\\.",
		  "endsPattern": "Not launching electron as debug argument was passed\\."
		}
	    }
	  }
	]
    }

launch.json:

{
	"version": "0.2.0",
	"configurations": [
	  {
	    "name": "Electron: Main",
	    "type": "node",
	    "request": "launch",
	    "protocol": "inspector",
	    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
	    "windows": {
				"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
	    },
	    "preLaunchTask": "electron-debug",
	    "args": ["--remote-debugging-port=9223", "./dist_electron"],
	    "outFiles": ["${workspaceFolder}/dist_electron/**/*.js"]
	  },
	  {
	    "name": "Electron: Renderer",
	    "type": "chrome",
	    "request": "attach",
	    "port": 9223,
	    "urlFilter": "http://localhost:*",
	    "timeout": 60000,
	    "webRoot": "${workspaceFolder}/src",
	    "sourceMapPathOverrides": {
				"webpack:///./src/*": "${webRoot}/*"
	    }
	  }
	],
	"compounds": [
	  {
	    "name": "Electron: All",
	    "configurations": ["Electron: Main", "Electron: Renderer"]
	  }
	]
    }

vue.config.js:

module.exports = {
	configureWebpack: {
		devtool: 'source-map'
	}
}

@ant-i-c-s In development, the http protocol is used, so there should be no issues there. I’ve had the same issue, usually a few reloads and maybe restarting electron fixes it. I have the same issue using Quasar CLI, so i’m thinking this might be an issue with Vue Devtools, as the issue is not limited to this plugin’s implementation of Electron. Maybe you could open an issue there as well, and we can work together to solve this problem as it seems quite common.