如何在指定版本环境下用VSCode旧协议无缝调试多目标Electron

Got it, let's walk through exactly how to set up that seamless multi-target Electron debugging using the legacy protocol for your specific stack—Electron 1.6.7, Node v6.11.1, VSCode 1.17, and Firefox. Since you already nailed this with the inspector protocol, I’ll focus on the key differences and tweaks needed for the legacy setup.

Node v6.x relies on the old legacy debug protocol instead of the newer inspector protocol you used before. To get multi-target support, you’ll need to pass specific flags when launching Electron:

• Main process: Add --debug=5858 (or any port you prefer) to your launch command. If you want the main process to pause immediately on startup (to hit early breakpoints), use --debug-brk=5858 instead.
• C++ native module: No extra port needed here—since native modules run in the main process context (context isolation wasn’t default in Electron 1.6.7), the main process debugger will attach to it automatically, as long as you build the module with debug symbols.
• Renderer process (for Firefox debugging): Add --remote-debugging-port=9222 to your launch flags. This lets Firefox connect to the renderer’s debug interface (Electron 1.6.x uses the Chrome DevTools protocol for renderers, which Firefox can interact with via this port).

Replace any inspector-based config in your .vscode/launch.json with this legacy protocol setup, which targets both the main process and your C++ prime-checking module:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron Main (Legacy Debug)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/main.js",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "runtimeArgs": [
        "--debug=5858",
        // Uncomment below to pause main process on startup
        // "--debug-brk=5858",
        "."
      ],
      "port": 5858,
      "protocol": "legacy",
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "env": {
        "NODE_ENV": "development"
      },
      "console": "integratedTerminal"
    }
  ]
}

Key details to note:

• "protocol": "legacy" is non-negotiable—it tells VSCode to use the old Node debug protocol instead of the inspector.
• The port value must match the one you set in the --debug flag.
• For your main.cpp module, you must build it with debug symbols. Run this command instead of a standard build:

  node-gyp rebuild --debug
  

  This outputs a debug build to build/debug/ instead of build/release/, which lets VSCode map your C++ source breakpoints to the running module.

1. Build your C++ module with debug symbols using the command above.
2. Start your Electron app via the VSCode launch configuration you created.
3. Set breakpoints in main.js (anywhere in the main process code) and in main.cpp (your prime-checking logic). VSCode should hit these breakpoints seamlessly—since the native module runs in the main process context, the legacy debugger will pick up the debug symbols and pause execution when the breakpoint is triggered.

If you want to debug the renderer process alongside the main process in Firefox:

1. Ensure you added --remote-debugging-port=9222 to your Electron runtime args in launch.json.
2. Start the Electron app via VSCode.
3. Open Firefox, go to about:debugging, click "This Firefox", then select "Connect" and enter localhost:9222.
4. You’ll see your Electron renderer tabs listed—select the one you want to debug, and Firefox’s DevTools will attach, letting you set breakpoints in renderer-side JavaScript.

• C++ breakpoints not hitting: Double-check that you built the module with --debug (verify the build/debug/ folder exists). If your module is in a subfolder, add a sourceMapPathOverrides entry in launch.json to map compiled module paths to your source files.
• VSCode can’t attach to main process: Confirm the port 5858 isn’t in use by another process—swap it to something like 5859 in both the runtime args and launch config if needed.
• Firefox renderer debugging issues: Ensure your Firefox version is 55 or newer (it needs to support the Chrome DevTools protocol for Electron 1.6.x). If you run into snags, try updating Firefox to a compatible release.

内容的提问来源于stack exchange，提问作者Frank