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

时间:2017-04-27 08:16:00

标签: javascript html google-chrome-devtools electron

如何设置电子浏览器窗口DevTools的宽度? 我知道如何设置主窗口的宽度和高度并打开DevTools:

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

但我想以某种方式设置DevTools宽度,这可能吗? 或者设置" Body"宽度因此为DevTools留出空间,设置宽度样式没有帮助。

1 个答案:

答案 0 :(得分:3)

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

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