Vue-devtools for Electron apps about devtools HOT 23 CLOSED

Can confirm vue-devtools loads and is functional with latest [email protected]. running it on windows...

Can we add to documentation how to correctly run it with electron?

app.on('ready', function) ): add this to function:
BrowserWindow.addDevToolsExtension('node_modules/vue-devtools')

So it will be googlable and easy.

from devtools.

Paste this into DevTools when you need vue-devtools:
x = require('electron').remote.getCurrentWindow();x.closeDevTools();x.openDevTools();

(This is probably the hackiest thing ever done.)

from devtools.

Another great method I use is installing with electron-devtools-installer. The great thing about this library is that you can virtually install any extension from the Chrome Web Store. Of course not all extensions will actually work in the electron environment, but there are quick ways to install Vue.js, React, and other extensions.

from devtools.

It seems like they fixed it in Electron 1.2.1 electron/electron#5711
Should be working now.

from devtools.

@Necmttn

Can confirm vue-devtools loads and is functional with latest [email protected].

from devtools.

@SimulatedGREG
Solved. thanks for checking up.
It was issue with my webpack configs.
i had to add

Vue.config.devtools = __ENV__.NODE_ENV !== 'production'

to my entry file and magic ✨
i hope it can help others who had similar problem.

from devtools.

@gtamas I think this may be an initialization bug in vue-devtools. I was having this same issue and tried many workarounds I found in SO. Finally one of them worked, but when I ran the app a second time, it stopped working. After playing around with it, it felt like some sort of timing issue when the dev tools tab populates for the first time. My work around is to close dev tools and then reopen them. Seems to work 100% of the time for me after that. I even tried delaying the call to open the dev tools on startup by 6 seconds or so and that still didn't work. Rarely, it will populate with data on startup. But every time, if I close Chrome devtools and reopen them, the data is now populated in the Vue tab. Does the same thing happen for you?

from devtools.

Paste this into DevTools when you need vue-devtools:
x = require('electron').remote.getCurrentWindow();x.closeDevTools();x.openDevTools();

(This is probably the hackiest thing ever done.)

Wow, this is the only thing that worked for me! And I've tried them all from this thread!! Much appreciated!

from devtools.

Not sure what may have changed, but it seems to be working now. I'll make sure to comment back if I get any issues.

from devtools.

+1

from devtools.

+1 :)

from devtools.

Hi @yyx990803

Would be great if you could clarify/comment on this please. Is it possible that vue-devtools could every work on source from file://

Thank you.

from devtools.

+1

from devtools.

file:// is now supported.

from devtools.

Still doesn't work in Electron. Must be some other issue related to electron/electron#915

from devtools.

Not sure if the issue begins here, but the newest version of the VueJS Devtools (vue-devtools@^3.0.0) seems to have stopped working within electron. The Vue tab does indeed show on the Developer Tools, but Vue is not detected, therefore there are no components or vuex modules to be inspected. The interesting thing is, the console doesn't have the "helpful hint" about installing the vue-devtools. So Vue recognizes the devtools?

I'm wondering if maybe the new Events tab (in vue-devtools) is using other chrome APIs that weren't made available from electron/electron#5711 and potentially failing silently. I was able to revert vue-devtools back to 2.3.1 (archive) and everything works as expected.

from devtools.

@SimulatedGREG does devtools detect Vue it if you manually hit "Refresh" button under the Vue tab?

from devtools.

@simplesmiler

It does not :(

You can try with https://github.com/simulatedgreg/electron-vue and see if maybe you get different results.

from devtools.

Has anyone tried with electron Version 1.7.3 (1.7.3)
seemslike it's doesn't work.

from devtools.

`import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import fileExplorer from './components/FileExplorer'
import router from './router'

Vue.component('file-explorer', fileExplorer);

Vue.config.productionTip = false
Vue.config.devtools = true // ==> This line is needed for VueTools <<===

new Vue({
router,
render: h => h(App)
}).$mount('#app')`

from devtools.

It's not woking for me...

I have electron 5.0.2 and Vue 3.7.0

I added the above to main.ts. Also installed vue-devtools for electron.

But the vue tab is still inactive. I can click to any subtab, but all are empty. How to activate the dev tools in Electron?

electron background.ts

app.on('ready', async () => {
    if (isDevelopment && !process.env.IS_TEST) {
        try {
            require('vue-devtools').install();
            // await installVueDevtools();
        } catch (e) {
            console.error('Vue Devtools failed to install:', e.toString());
        }
    }
    createWindow();
});

Main.ts

Vue.config.devtools = true;

Thanks in advance

from devtools.

@dafergu2 Same for me. Close, Reopen, Rejoice...

from devtools.

Just closing and reopening the devtools does not work for me, rather the Vue tab need to selected first. I am using this snippet to automatically close and reopen the Vue tab.

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);
  });
});

from devtools.