How to set Electron Browser Window DevTools width?

Question

How to set Electron Browser Window DevTools width? I know how to set width and height of the mainwindow and open DevTools:

  mainWindow = new BrowserWindow({width: 1920, height: 1080} 
  // Open the DevTools.
  mainWindow.webContents.openDevTools()

But I would like to set DevTools dock width somehow, is it possible? Or set "Body" width so it leaves space for DevTools, setting width style does not help.

Answer 1

I was able to solve this one by writing to the the Preferences file in the userData path on initialization

const userDataPath = app.getPath("userData");
const prefPath = path.join(userDataPath, "Preferences");
const prefs = JSON.parse(fs.readFileSync(prefPath, "utf-8"));
prefs.electron.devtools = {
  preferences: {
    "InspectorView.splitViewState": JSON.stringify({
      vertical: { size: 500 },
      horizontal: { size: 500 },
    }),
    uiTheme: '"dark"',
  },
};
fs.writeFileSync(prefPath, JSON.stringify(prefs));

Working example here: https://github.com/xdumaine/electron-quick-start