More dev tools

[Zyles]

Hello sir,

What do you think about adding vue-devtools and devtron to this repo?

Thanks.

[Deluze]

This would be a great addition.

I'm all for first party debugging tools 👍 I've already integrated Vue Devtools with Electron before and it was a breeze. I'll need to look into how we can keep good DX by allowing the debuggers to be enabled / disabled any time without too much work.

[Deluze]

After a quick glance on the devtron repository, it seems that there hasn't been a release in 6 years. Therefore I think it's safer to start off with Vue Devtools only, for now..😄

[loriswave]

Hi, do you plan to add some automatic test tools? I have added Vitest and seems to work fine and without the need for many configs. I have tried to add Cypress but I was not able to do it. Probably it needs some config to use the correct path but I'm not so good to do it.

[TiagoSilvaPereira]

@Deluze I tried to use Vue Devtools Standalone, but although it seems to connect to the application, it doesn't work (it won't show any component and throws the following error on the Vue devtools window console):

Uncaught TypeError: Cannot read property 'view' of null

I found a similar issue on the vue-devtools repository but could not manage to put it to work: https://github.com/vuejs/devtools/issues/1864

Do you have any idea how I could put it to work?

Thank you very much?

[Deluze]

Hi, do you plan to add some automatic test tools? I have added Vitest and seems to work fine and without the need for many configs. I have tried to add Cypress but I was not able to do it. Probably it needs some config to use the correct path but I'm not so good to do it.

@loriswave

Although I do agree that testing is a good thing to have for production apps, I do want this template to be as simple as possible. The reason why I made this template was because the other electron templates used a lot of opinionated packages that did not fit my style.

If you want to add Cypress I recommend reading up to the docs, I believe Electron support comes out of the box. Sadly I don't think there's a 1 for all solution on how to setup Cypress with Electron since not all Electron projects are the same.

Please open another issue / discussion if you need assistance with setting up Cypress, others contributors or myself can help you out 👍

[Deluze]

@Deluze I tried to use Vue Devtools Standalone, but although it seems to connect to the application, it doesn't work (it won't show any component and throws the following error on the Vue devtools window console):

Uncaught TypeError: Cannot read property 'view' of null

I found a similar issue on the vue-devtools repository but could not manage to put it to work: vuejs/devtools#1864

Do you have any idea how I could put it to work?

Thank you very much?

I recommend reading up this post; https://codybontecou.com/electron-app-with-vue-devtools.html#installation it's written by @CodyBontecou, someone who made helpful resources based on this template. Massive credits to them!

Since the error is quite vage, I don't have an immediate solution for you. Assuming the linked issue is indeed related, I see OP made an accident by setting their renderer to production mode on accident.

Let me know if above resource helps you out, if not, a reproduction repo would be helpful to see what's going wrong.

[TiagoSilvaPereira]

Hi @Deluze I installed Vue DevTools following the post you suggested. Still, unfortunately, it didn't work (I also tried the official documentation since this post is a little outdated and uses the Beta version).

I also checked if the problem was related to the production code, but I didn't change anything in the code related to that. Maybe it is a problem with DevTools Standalone.

However, I managed to install VueDev Tools following the official Electron documentation with the following package: https://github.com/MarshallOfSound/electron-devtools-installer

I found the information here: https://www.electronjs.org/docs/latest/tutorial/devtools-extension

Anyway, thank you for taking the time to look for that. I hope it helps others trying to install Vue Devtools using your template.

And thank you for this amazing template!

[Deluze]

Thanks for the resources @TiagoSilvaPereira. Glad you made it work!

I do think this electron-devtools-installer package would be a great addition to the template 😄 Definitely going to spend some time researching it.

[TiagoSilvaPereira]

@Deluze awesome to know that

[frankperez87]

Hey @TiagoSilvaPereira @Deluze

I spent some time getting Devtools set up and working on the template using electron-devtools-installer. Give it a try and let me know what you think :)

Here's the PR https://github.com/Deluze/electron-vue-template/pull/34

[Deluze]

@frankperez87 Thank you so much for the PR and time! While I do want Vue devtools to be part of this template, I'm running into some issues that I'd like to have resolved before it becoming part of the template. I've left some comments on the PR itself.