使用Webstrom调试Electron

前言

      无意间发现了node.js竟然可以写桌面应用,果断尝试下。中文官网:http://electronjs.org/

不过发现连接异常的慢。。。还是W3Cschool快多了:https://www.w3cschool.cn/electronmanual/

1.创建工程



2.创建完以后,安装electron和electron-packager(打包用)

File-Settings-Language & Frameworks-Node.js and NPM-点击(+)号

查找electron并安装





3.安装完成后,新建main.js



写了一个用来加载网页并显示的功能,代码如下:

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// 保持一个对于 window 对象的全局引用,如果你不这样做,
//
### 如何使用 Vue Devtools 调试 Electron 应用 为了能够有效地使用 Vue Devtools 来调试基于 Electron 的应用程序,开发者可以遵循特定的配置流程来集成此工具。这不仅有助于提高开发效率,还能简化状态管理和组件树的查看。 #### 安装 Vue Devtools 对于希望在其 Electron 项目中加入 Vue Devtools 支持的开发者来说,可以从 GitHub 上获取最新的源码副本并按照官方文档说明完成安装过程[^2]: ```bash git clone https://github.com/vuejs/vue-devtools.git cd vue-devtools npm install || cnpm install npm run build || cnpm run build ``` #### 配置 Electron 主进程 为了让 Vue Devtools 正常工作于 Electron 中,需调整 `src/main/index.dev.js` 文件内的设置,在创建窗口实例时通过调用 `BrowserWindow.addDevToolsExtension()` 方法加载扩展程序[^3]: ```javascript const path = require('path'); // 创建浏览器窗口. function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: true } }); // 加载Vue Devtools作为开发者工具的一部分 if (!process.env.IS_TEST) { try { win.loadURL(process.env.VUE_APP_URL); let devToolPath; if (process.platform === "win32") { devToolPath = path.resolve( process.resourcesPath, './dev/vuedevtools' ); } else { devToolPath = path.resolve( process.resourcesPath, '../Resources/dev/vuedevtools' ); } win.webContents.openDevTools(); BrowserWindow.addDevToolsExtension(devToolPath); } catch (_) {} } } ``` 请注意上述代码片段假设已将构建好的 Vue Devtools 扩展放置到了项目的适当位置,并且路径可能依据实际环境有所不同。 #### 使用 Chrome 用户数据目录方法 另一种方式是下载预编译版本并将压缩包解压至 Chrome 浏览器用户的个人资料路径下,之后同样可以通过 `BrowserWindow.addDevToolsExtension()` 函数指定该路径来激活插件功能[^4]。 ```javascript BrowserWindow.addDevToolsExtension('/path/to/unpacked/vue-devtools'); ``` 这里 `/path/to/unpacked/vue-devtools` 是指本地磁盘上已经解压后的 Vue Devtools 插件所在的具体绝对路径。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值