Electron 打开开发者工具 devtools

Electron 打开开发者工具 devtools

在electron开发的过程中,可以用代码控制打开自带chrome的devtools开发者工具,进而调试渲染教程页面。

平时,我们利用chrome要调试网页的时候,按F12(mac下面是shift+花+i)打开的开发者工具,就是这个devtools,或者可以称之为"开发者模式"

1.打开devtools

mainWindow.webContents.openDevTools();

默认状态下,开发者工具的位置是上一次工具打开的位置(左边,右边,下边都有可能。取决于上一次的状态,但不会是分离状态,也没有处于顶部的状态)。

界面右侧打开devtools

mainWindow.webContents.openDevTools({mode:'right'});

界面底部打开devtools

mainWindow.webContents.openDevTools({mode:'bottom'});

界面左侧打开devtools

mainWindow.webContents.openDevTools({mode:'left'});

分离状态打开devtools

mainWindow.webContents.openDevTools({mode:'detach'});

相关推荐
涔溪1 天前
如何解决微前端架构中主应用和微应用的通信问题?
前端·架构
重铸码农荣光1 天前
深入理解 JavaScript 原型链:从 Promise.all 到动态原型的实战探索
前端·javascript·promise
进击的野人1 天前
深入理解 Async/Await:现代 JavaScript 异步编程的优雅解决方案
javascript·面试·ecmascript 6
我叫黑大帅1 天前
什么叫可迭代对象?为什么要用它?
前端·后端·python
颜渊呐1 天前
Vue3 + Less 实现动态圆角 TabBar:从代码到优化实践
前端·css
PineappleCoder1 天前
pnpm 凭啥吊打 npm/Yarn?前端包管理的 “硬链接魔法”,破解三大痛点
前端·javascript·前端工程化
fruge1 天前
前端文档自动化:用 VitePress 搭建团队技术文档(含自动部署)
运维·前端·自动化
CoolerWu1 天前
TRAE SOLO实战成功展示&总结:一个所见即所得的笔记软体
前端·javascript
Cassie燁1 天前
el-button源码解读1——为什么组件最外层套的是Vue内置组件Component
前端·vue.js
vx_bscxy3221 天前
告别毕设焦虑!Python 爬虫 + Java 系统 + 数据大屏,含详细开发文档 基于web的图书管理系统74010 (上万套实战教程,赠送源码)
java·前端·课程设计