javascript - 开发工具在 Electron 中的大小和位置
问题描述
如何在 Electron 的不同模式下更改 Dev Tools 的大小和位置?目前我在 main.js 中使用简单的函数在应用程序启动时打开开发工具,基本上只有一行:
mainWindow.webContents.openDevTools({ mode: 'bottom' });
或者
mainWindow.webContents.openDevTools({ mode: 'detach' });
在单独的窗口中或作为主应用程序窗口的一部分打开我的开发工具。我需要的是:
让分离模式的开发工具窗口出现在我的应用程序窗口旁边,而不是在它的顶部或下方。我想宣布它的初始位置。
对于底部/右侧和分离模式的开发工具来说,它们的尺寸正好符合我的需要。在分离模式下,它将是窗口大小,在右/下模式下,这将是开发工具占用的窗口大小。我可以在开发工具打开后手动完成所有这些操作,因此必须有一种方法让它从一开始就以正确的位置和大小开始,但我无法找出如何。
更新:回答了一半的问题(下面是我自己的答案),但为了完整起见,关于“正确”或“底部”模式下的开发工具的答案仍然有待商榷。
解决方案
我设法使用以下答案解决了一半的问题: 如何在电子中设置 devTools 窗口位置 现在我可以使用以下代码在分离模式下完全控制开发工具:
function DTon(){
devtools = new BrowserWindow();
mainWindow.webContents.setDevToolsWebContents(devtools.webContents);
mainWindow.webContents.openDevTools({ mode: 'detach' });
mainWindow.webContents.once('did-finish-load', function () {
var windowBounds = mainWindow.getBounds();
devtools.setPosition(windowBounds.x + windowBounds.width, windowBounds.y);
devtools.setSize(windowBounds.width/2, windowBounds.height);
});
mainWindow.on('move', function () {
var windowBounds = mainWindow.getBounds();
devtools.setPosition(windowBounds.x + windowBounds.width, windowBounds.y);
});
}
除了在单独的窗口中之外,它的行为基本上类似于“正确”模式下的开发工具。
推荐阅读
- firebase - 仅检索更改的文档字段
- javascript - 在显示文本之前等待页面重新加载
- reactjs - react-sortable-hoc -- 在没有实验类属性的情况下保持新的排序顺序
- python - Python, Splitting Multiple Strings in a Column
- php - 如何获得一维数组选择列值
- php - php $_POST[] 提交后未设置
- vim - Vim BufWritePost 在启动时手动获取 vimrc 后才会生效
- typescript - 为什么覆盖的名称属性记录为未定义
- mysql - “错误 2026 (HY000): SSL 连接错误”通过某些网络连接到 MySQL,但不是其他网络
- python - 删除重复图中的边会删除原始图中的边