How to open dev tools in separate window?

[hyperknot]

How can I modify the watcher script, such that it opens the devtools in a separate window, and not in the right side attached mode?

[hyperknot]

I solved it, here is how to make an undocked devtools which is snapping to the right side of the main window.

import { BrowserWindow } from 'electron'

const WIDTH = 600
const HEIGHT = 800
export function openDevTools(mainWindow) {
  if (!mainWindow) return

  const devtools = new BrowserWindow({ show: false })
  mainWindow.webContents.setDevToolsWebContents(devtools.webContents)
  mainWindow.webContents.openDevTools({ mode: 'undocked' })

  mainWindow.webContents.on('did-stop-loading', () => {
    fixSize(mainWindow, devtools)
  })
  mainWindow.on('move', () => {
    fixSize(mainWindow, devtools)
  })
}

function fixSize(mainWindow, devtools) {
  const windowBounds = mainWindow.getBounds()
  devtools.show()
  devtools.setPosition(windowBounds.x + windowBounds.width, windowBounds.y)
  devtools.setSize(WIDTH, HEIGHT)
}

Then you just change mainWindow.js like this:

    if (import.meta.env.DEV) {
      openDevTools(browserWindow)
    }