Debug (devTools) application in Chrome Electron.js 7

- Andrés Cruz

En español
Debug (devTools) application in Chrome Electron.js 7

Previously we saw how we can use plugins such as Bootstrap with Electron, therefore, having an outline of a more complete application, it is time to know a fundamental tool when developing our web applications, a tool that we always have at hand is the use from the developer console of the browser or devTools to debug it, in Electron, we can also easily use it, for this, we have to activate it in the BrowserWindow() object:

index.js

function createWindow(){
    let win = new BrowserWindow({
        width: 800,
        height:600,
        webPreferences:{
            nodeIntegration: true,
            contextIsolation: false 
        }
    })
    win.loadFile("index.html")
    win.webContents.openDevTools()
}

And we will have:

Debug google chrome

Now with this, we can create more complete development, such as a chat list with Electron.js and Bootstrap 5.

Remember that the previous material is part of mi curso completo sobre Electron.js

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.