Vue JS Dev Tools - Not detecting VUE DOM

Vue JS Dev Tools - installing but does not list elements When running yarn electron:serve - the VUE JS dev tools are not registering any elements as VUE. However the tools are installed.

To Reproduce

1. electron:serve
2. The App launches
3. Dev Tools installed but not working

Expected behavior

1. After running the same command with no code changes the VUE devtools then work this is random and far between ( Same app and code but successful build here )

Package.json { "name": "com.electron", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "electron:build": "vue-cli-service electron:build", "electron:serve": "vue-cli-service electron:serve", "postinstall": "electron-builder install-app-deps", "postuninstall": "electron-builder install-app-deps", "test:e2e": "vue-cli-service test:e2e" }, "main": "background.js", "dependencies": { "client-oauth2": "^4.2.3", "core-js": "^2.6.5", "vue": "^2.6.10", "vue-router": "^3.0.6", "vuex": "^3.1.0" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.7.0", "@vue/cli-plugin-e2e-cypress": "^3.7.0", "@vue/cli-plugin-eslint": "^3.7.0", "@vue/cli-service": "^3.7.0", "@vue/eslint-config-prettier": "^4.0.1", "babel-cli": "^6.26.0", "babel-eslint": "^10.0.1", "electron": "^5.0.0", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "vue-cli-plugin-electron-builder": "^1.3.1", "vue-template-compiler": "^2.5.21", "webpack-cli": "^3.3.1" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "@vue/prettier" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions" ] }

Additional context Not sure if the tools are trying to re install or there is a race condition before the browser loads? Or it might be silently failing?

[baileyherbert]

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.

[gtamas]

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