Skip to content

Aquent | DEV6

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Electron Development Tools

Written by: Gagan Kaur

Today I am going to cover some very helpful Electron Development Tools, which can make the journey of a developer easy and smooth through development to production phase. Incorporating these tools in the very beginning of your project journey is going to save you a lot of time and energy.

“Make sure that you always have the right tools for the job.

It’s no use trying to eat a steak with a teaspoon, and a straw.”

― Anthony T. Hincks


To achieve live/hot reload in app start use Electron-reload. It is the simplest way to load the contents of all active browser windows when the source file changes. To install it, just run the command below from the project directory.

npm install electron-reload

There are two types of resets which can be performed using this tool.

Soft Reset – If you are only interested in reloading your app when front end code changes, use the line below inside main.js file.


Hard Reset – If you want to start a new electron process. Use these lines of code inside main.js file.

const path = require('path')
require('electron-reload')(__dirname, {
  electron: path.join(__dirname, 'node_modules', '.bin', 'electron')

 From now onwards, the application will be reloaded whenever you change the file,.


This module can check if Electron is running in development mode. It can be used directly inside the main and renderer processes. To install it just run the command below from the directory of your project.

npm install electron-is-dev

It can be used like this.

const isDev = require('electron-is-dev');
if (isDev) {
                  console.log('Running in development');
} else {
                  console.log('Running in production');

Sign up for our Electron Bootcamp

$499 – 1 Full Day

View Course Details


This module adds useful debug features to the Electron app.

To install it just run this command from the directory of your project.

npm install electron-debug

Some of the features are:

•   Toggles DevTools window

•   Force reload  the page

•   Open DevTools and focus the Element Inspector Tool

•   Activates the DevTools Extension.


It is an open source tool to help you inspect, debug and monitor an Electron application.

To install it just run below command from the directory of your project.

npm install devtron

To see it in action, run the following from the Console tab of your app’s DevTools:


You should now see a Devtron tab added to the DevTools

Some of the features are:

  • The “require” graph allows you to trace through the loading order and dependency graph of the JavaScript files in your app.
  • Helps you explore the events and listeners currently registered in the app.
  • Track and inspect the messages sent and received between the processes in your app.
  • Linter provides guidance and code snippets for possible issues and missing functionality in the app.

It makes a huge difference when you have the right set of tools at your disposal. So, go ahead and explore some more Electron tools which are being used in the Electron community. Below is the link where you can find some helpful tools: