VSCode 使用electron主进程调用js文件
1. package.json
{ "name": "electrontest", "version": "0.1.0", "main": "main.js" }
2.main.js
var electron = require('electron'); var app = electron.app; var BrowserWindow = electron.BrowserWindow; var ipc = electron.ipc; var mainWindow = null; app.on('window-all-closed', function () { if (process.platform != 'darwin') { app.quit(); } }); app.on('ready', function () { // 创建浏览器窗口。 mainWindow = new BrowserWindow({ width: 800, height: 600 }); // 加载应用的 index.html mainWindow.loadURL('file://' + __dirname + '/index.html'); // 打开开发工具 mainWindow.openDevTools(); // 当 window 被关闭,这个事件会被发出 mainWindow.on('closed', function () { // 取消引用 window 对象,如果你的应用支持多窗口的话, // 通常会把多个 window 对象存放在一个数组里面, // 但这次不是。 mainWindow = null; }); mainWindow.webContents.openDevTools() });
3.index.html
<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <script> var alertOnlineStatus = function () { //window.alert(navigator.onLine ? 'online' : 'offline'); ipc.send('online-status-changed', navigator.onLine ? 'online' : 'offline'); }; window.addEventListener('online', alertOnlineStatus); window.addEventListener('offline', alertOnlineStatus); alertOnlineStatus(); </script> <h1>Hello World!</h1> We are using io.js111 <script>document.write(process.version)</script> and Electron <script>document.write(process.versions['electron'])</script>. </body> </html>
4.launch.json
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Electron Main", "cwd": "${workspaceRoot}", "runtimeExecutable": "/home/rox/.nvm/versions/node/v10.15.1/bin/electron", "windows": { "runtimeExecutable": "/home/rox/.nvm/versions/node/v10.15.1/bin/electron.cmd" }, "args" : ["."], "outputCapture": "std" //"program": "${workspaceFolder}/main.js" } ] }
5.在js文件中设置断点 使用Electron Main 项调试
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!