vscode 调试electron代码

 原文地址:https://electronjs.org/docs/tutorial/debugging-main-process-vscode,有问题最好查看官网文档

1.在代码根目录,添加 .vscode/lanuch.json,内容如下:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "outputCapture": "std"
    }
  ]
}

2、打断点,在vscode 按快捷键F5或点击开始调试按钮

VSCode调试Electron可以按照以下步骤进行: ### 1. 初始化项目 确保你的Electron项目已经正确初始化,并且安装了必要的依赖。如果还没有项目,可以使用以下命令创建一个基本的Electron项目: ```bash mkdir electron-debugging cd electron-debugging npm init -y npm install electron --save-dev ``` ### 2. 创建启动配置文件 在VSCode中,打开项目文件夹,然后点击左侧的调试图标(像一个小虫子的图标),接着点击齿轮图标,选择“创建 launch.json 文件”。在弹出的选择环境中,选择“Node.js”。 打开生成的 `launch.json` 文件,将其内容替换为以下配置: ```json { "version": "0.2.0", "configurations": [ { "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceFolder}", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" }, "args": [".", "--remote-debugging-port=9223"], "outputCapture": "std" }, { "name": "Debug Renderer Process", "type": "chrome", "request": "attach", "port": 9223, "webRoot": "${workspaceFolder}" } ] } ``` 上述配置包含了两个调试配置: - “Debug Main Process”:用于调试Electron的主进程。 - “Debug Renderer Process”:用于调试Electron的渲染进程。 ### 3. 调试主进程 选择“Debug Main Process”配置,然后点击调试图标中的绿色三角形开始调试。此时,Electron应用会启动,并且VSCode会在主进程代码设置的断点处暂停执行。 ### 4. 调试渲染进程 如果需要调试渲染进程,可以在主进程启动后,选择“Debug Renderer Process”配置,然后点击调试图标中的绿色三角形。VSCode会连接到Electron应用的渲染进程,并且可以在渲染进程的代码设置断点进行调试。 ### 代码示例 以下是一个简单的Electron应用示例,用于演示调试过程: #### `main.js` ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false } }) win.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) ``` #### `index.html` ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Electron Debugging Example</title> </head> <body> <h1>Hello, Electron!</h1> <script> const { ipcRenderer } = require('electron') console.log('Renderer process is running.') </script> </body> </html> ``` 在上述代码中,可以在 `main.js` 和 `index.html` 中的代码行左侧点击设置断点,然后按照上述步骤进行调试
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值