Electron 使用 VsCode 調(diào)試

本指南將介紹如何使用 VSCode debugging 為您自己的 Electron 項(xiàng)目和 native Electron 代碼庫(kù)（Electron codebase）調(diào)試。

調(diào)試您的 Electron 應(yīng)用?

主進(jìn)程?

1. 在 VSCode 中打開(kāi)一個(gè) Electron 項(xiàng)目。

$ git clone git@github.com:electron/electron-quick-start.git
$ code electron-quick-start

2. 添加文件 .vscode/launch.json，內(nèi)容為

{
  "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" : ["."]
    }
  ]
}

3. 調(diào)試

在 main.js 中設(shè)置一些斷點(diǎn)，并在 調(diào)試視圖 中開(kāi)始調(diào)試. 您應(yīng)該能夠點(diǎn)擊斷點(diǎn)。

這是一個(gè)預(yù)先配置好了的項(xiàng)目，你可以下載并直接在 VSCode 中調(diào)試：https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start

調(diào)試 Electron 代碼庫(kù)（Electron codebase）?

如果您想從源代碼構(gòu)建 Electron 并修改 native Electron 代碼庫(kù)，本節(jié)將幫助您測(cè)試您的修改。

對(duì)于那些不確定在哪里獲得代碼或如何構(gòu)建它， Electron 的構(gòu)建工具 自動(dòng)化并解釋此過(guò)程的大部分。

Windows (C++)?

1. 在 VSCode 中打開(kāi)一個(gè) Electron 項(xiàng)目。

$ git clone git@github.com:electron/electron-quick-start.git
$ code electron-quick-start

2. 添加文件 .vscode/launch.json，內(nèi)容為

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "(Windows) Launch",
      "type": "cppvsdbg",
      "request": "launch",
      "program": "${workspaceFolder}\\out\\your-executable-location\\electron.exe",
      "args": ["your-electron-project-path"],
      "stopAtEntry": false,
      "cwd": "${workspaceFolder}",
      "environment": [
          {"name": "ELECTRON_ENABLE_LOGGING", "value": "true"},
          {"name": "ELECTRON_ENABLE_STACK_DUMPING", "value": "true"},
          {"name": "ELECTRON_RUN_AS_NODE", "value": ""},
      ],
      "externalConsole": false,
      "sourceFileMap": {
          "o:\\": "${workspaceFolder}",
      },
    },
  ]
}

配置說(shuō)明

• cppvsdbg 需要啟用 內(nèi)置的 C/C++ 擴(kuò)展。
• ${workspaceFolder} 是 Chromium 的 源 的完整路徑。
• your-executable-location 將是以下幾項(xiàng)之一：
  • Testing：如果您使用的是默認(rèn)的 Electron 構(gòu)建工具 設(shè)置，或默認(rèn)的 從源端構(gòu)建 的設(shè)置。
  • Release：如果你構(gòu)建了一個(gè)發(fā)布版本，而不是測(cè)試版本。
  • your-directory-name：如果你在構(gòu)建過(guò)程中修改， 這將是你指定的。
• args 數(shù)組字符串 "your electron-project-path" 應(yīng)為您正在用于測(cè)試的 Electron 項(xiàng)目或 main.js 的絕對(duì)路徑。 在本示例中，它應(yīng)該是您的 electron-quick-start 的路徑。

3. 調(diào)試?

在你選擇的原始 Electron C++ 代碼中的 .cc 文件中設(shè)置一些斷點(diǎn)，并在 Debug View 中開(kāi)始調(diào)試。