如何设置电子浏览器窗口 DevTools 宽度？

Posted 2023-03-07

【中文标题】如何设置电子浏览器窗口 DevTools 宽度？

【英文标题】：How to set Electron Browser Window DevTools width?

【发布时间】：2017-09-24 22:08:18

【问题描述】：

如何设置 Electron Browser Window DevTools 的宽度？ 我知道如何设置主窗口的宽度和高度并打开 DevTools：

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

但是我想以某种方式设置 DevTools 的停靠宽度，可以吗？或者设置“Body”宽度，以便为 DevTools 留出空间，设置宽度样式无济于事。

【问题讨论】：

请注意，虽然类似的问题在其他地方得到了回答，但它们都在单独的窗口中处理 devTools。然而，这个问题特别询问 devTools 停靠的情况。

【参考方案1】：

我可以通过在初始化时写入userData 路径中的Preferences 文件来解决这个问题

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));

这里的工作示例：https://github.com/xdumaine/electron-quick-start