Electron Development Tools
Apr 08 2019 02:16pm | | Share

Electron Development Tools

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

 

Electron-reload

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.

 

require('electron-reload')(__dirname);

 

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.

 

Electron-is-dev

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

 

Electron-debug

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.

 

Devtron

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:

 

require('devtron').install()

 

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:

https://github.com/electron-userland