Cody Bontecou's Blog
Integrating Vue Devtools into an Electron Application

Integrating Vue Devtools into an Electron Application

Cody Bontecou's photo
Cody Bontecou
·

2 min read

Using Vue Devtools to debug Electron application running VueJS on the frontend.

Integrating Vue Devtools into an Electron Application

Bringing the VueJS devtools into our Electron application to help debug. This post assumes you have followed along with my previous post.

Installation

Vue Devtools provides a non-browser specific version of their devtools that they call standalone.

You can install the package globally:

npm install -g @vue/devtools@beta
# Or with yarn
yarn global add @vue/devtools@beta

Or within your project as a dependency:

npm install --save-dev @vue/devtools@beta
# Or with yarn
yarn add -D @vue/devtools@beta

Because our application is using Vue 3, we must us version 6 beta of the devtools according to this issue

Using the VueJS devtools globally

Once installed globally, you can now run the command vue-devtools on your command line.

This will spawn an instance of the devtools within its own window.

Standalone vue-devtools that spawns when vue-devtools command is ran.

Now, add the following to the <head> section of your applications HTML file:

<script src="http://localhost:8098"></script>

If you want to debug your application remotely, use the following code snippet instead:

<script>
  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>

Don't forget to remove this code before deploying to production!

Once your application has the appropriate script tag within its HTML, run it without killing the terminal that is running vue-devtools.

In our case,

npm run dev

Running the Vue Devtools as a dependency

Within your project directory, run the following command should spawn the devtools:

./node_modules/.bin/vue-devtools

For convenience sake and ease-of-use, I moved the ./node_modules/.bin/vue-devtools command into my package.json scripts:

"devtools": "./node_modules/.bin/vue-devtools"

When using the devtools as a local dependency, we do not need the script tag within our <head>

Remove this code snippet if you added it earlier:

<script src="http://localhost:8098"></script>

You should be all set up now. If you need additional help, check out their documentation or their GitHub repo documentation.

Hope you enjoyed it!