How to Add DevTools to Electron Browser?


In the previous tutorial we added the "Tirex Dinosaur Game" to our Electron Browser. If you missed it, you may enjoy it reading here.

In this tutorial, we are going to add DevTools to our Electron Browser. If you are developer, you may have heard of Chrome DevTools. Chrome DevTools are useful set of tools for web developers to edit web pages and preview them on the fly. We are going to add this tools set to our Electron Web Browser, so that it will be very useful for developers like us.

All you have to do is go to our "electronbrowser.js" file and find the comment "//Load DevTools" and add this code below the comment;


And then add this code under the "//Event Listeners" section.



Now run the application and find "DevTools" menu item from the Menu at the top right corner of the browser and click on it. Now the DevTools window will appear.



Await for the Next Tutorial.