Vue-devtools: Vue-devtools for Electron apps

[sunabozu]

Is it possible? The description states that file:// protocol is unaccessible. Is this a fundamental limitation for all devtools extensions?
I tried to load it using the following instruction, and the Electron shell processes it without errors and adds it to the DevTools Extensions file, but the new tab doesn't show up.

[altitudems]

+1

[bunterWolf]

+1 :)

[WayneHarris]

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.

[Folyd]

+1

[yyx990803]

file:// is now supported.

[sunabozu]

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

[sunabozu]

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

[SimulatedGREG]

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 https://github.com/electron/electron/pull/5711 and potentially failing silently. I was able to revert vue-devtools back to 2.3.1 (archive) and everything works as expected.

[simplesmiler]

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

[SimulatedGREG]

@simplesmiler

It does not :(

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

[SimulatedGREG]

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.

[Necmttn]

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

[SimulatedGREG]

@Necmttn

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

[Necmttn]

@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.

[azurinko]

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.

[SimulatedGREG]

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.

[rodrigozoff]

`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')`

[gtamas]

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

[dafergu2]

@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?

[justintaddei]

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

[justintaddei]

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.)

[justice47]

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!

[char101]

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