How to get dev tools in built electron angular app via typescript


#1

Hello,

Can somebody tell me, how to toggle devTool from electron app after package. I developed this app in angular2. So, I just want to have a button which will toggle devTool on demand.

Thank you!
Narottam Goyal


#2

Hello there,

This can be achieved with ipc. You can have a structure like this:
In your main process you can have this (assuming your window is named win):

ipcMain.on('open-devtools', _ => {
    if(!win.webContents.isDevToolsOpened()){
        win.webContents.openDevTools() 
    } else {
        win.webContents.closeDevTools() 
    }
})

And in your render process you can have an button with id = 'devtools'

var btn = document.querySelector('#devtools')  
btn.addEventListener('click', function(){ 
   ipcRenderer.send('open-devtools')  
})

What this code does is send an event to your main process every time you click the button. THe event is intercepted in the ipcMain and if the devTools is hidden, we call the webContent.openDevTools() to open it in the window (win in this case). Or else, we hide it.

Alternatively, you can simply use

win.webContents.toggleDevTools()

instead of an if...else statement.
Cheers.


#3

@eddydarell Thanks for your quick response!!

As I am very new to UI world…one more thing how do i do the same from typescript. As i don’t have any js file other than main.js; I am writting everything in Typescript for angular2 app.

Thank you!


#4

This snippets should work fine with TypeScript. Try them.