从 Visual Studio 代码启动并附加到 NW.JS 程序

Question

有没有人有 launch.json 示例可以用于 Visual Studio 附加或启动 NW.JS 桌面程序的代码。是的，我知道 NW.JS 使用 chromium debug，你可以直接调试它。但如果能够从 VS CODE 进行调试和单步执行，那就太好了。

我假设它使用端口 9222（下面不起作用）

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "DOM Debug",
            "type": "chrome",
            "request": "launch",
            "runtimeExecutable": "${workspaceRoot}/nw.exe",
            "runtimeArgs": [
                "${workspaceRoot}",
                "--remote-debugging-port=9222"
            ],
            "webRoot": "${workspaceRoot}",
            "sourceMaps": false,
            "diagnosticLogging": true,
            "port": 9222
        },
        {
            "name": "Node Debug",
            "type": "chrome",
            "request": "launch",
            "runtimeExecutable": "${workspaceRoot}/nw.exe",
            "runtimeArgs": [
                "${workspaceRoot}",
                "--remote-debugging-port=9222"
            ],
            "url": "chrome-extension://*/_generated_background_page.html",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": false,
            "diagnosticLogging": true,
            "port": 9222
        }
    ]
}

下面附上日志：

Vscode log

Answer 1

我可以使用修改后的 Chrome 扩展调试器和 launch.json 文件中的以下配置来调试 NW.JS 应用程序。请注意，我有一个用于调试浏览器上下文的配置和另一个用于调试节点上下文的配置。我尝试了混合模式，但从未遇到过断点。此设置假定应用程序文件和 NW.JS 可执行文件位于同一目录中。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "nwjs DOM debug",
            "runtimeExecutable": "${workspaceRoot}/nw.exe",
            "runtimeArgs": [
                "${workspaceRoot}",
                "--remote-debugging-port=9222"
            ],
            "webRoot": "${workspaceRoot}",
            "sourceMaps": false,
            "diagnosticLogging": true,
            "port": 9222
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "nwjs Node debug",
            "runtimeExecutable": "${workspaceRoot}/nw.exe",
            "runtimeArgs": [
                "${workspaceRoot}",
                "--remote-debugging-port=9222"
            ],
            "url": "chrome-extension://*/_generated_background_page.html",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": false,
            "diagnosticLogging": true,
            "port": 9222
        }
    ]
}

我修改了 Chrome 扩展的调试器，方法是更改一个函数以允许加载和映射找到的所有脚本。调试器通常排除 extension:// 和 chrome-extension:// 脚本。

在文件[扩展路径]\.vscode\extensions\msjsdiag.debugger-for-chrome-2.3.2\node_modules\vscode-chrome-debug-core\out\src\chrome\chromeDebugAdapter.js中更改函数shouldIgnoreScript() 到 return false.

shouldIgnoreScript(script) {
    return false;//script.url.startsWith('extensions::') || script.url.startsWith('chrome-extension://');
}

一个副作用是，当调试器在节点上下文中启动时，您会收到很多消息，指出调试器找不到 NW.JS 的本机节点模块。没什么大不了的，只要你不需要介入它们。

此设置适用于我，但它仍然不稳定，调试器 websocket 连接似乎随机断开。但它已经足够可靠，无需诉诸大量 console.logs().

即可进行调试。

Answer 2

克雷格回答更新。

Chrome 扩展版本 3.1.8 的调试器需要不同的更改：
在 [extensions path]\.vscode/extensions/msjsdiag.debugger-for-chrome-3.1.8/out/bundle.js 中替换

exports.targetFilter = target => target && (!target.type || target.type === 'page');

与

exports.targetFilter = null;

Answer 3

我能够使用以下配置进行调试：

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Node Debug",
        "type": "nwjs",
        "request": "launch",
        "runtimeExecutable": "/home/anne/Documents/nwjs/nw",
        "runtimeArgs": [
            "${workspaceRoot}/build",
            "--remote-debugging-port=9222"
        ],
        "webRoot": "${workspaceRoot}/build",
        "sourceMaps": true,
        "port": 9222
    }
]

}

版本：

nwjs debbuger : 1.0.17
node :v10.11.0
react:16.4.1

我真的希望这可以帮助其他人！

（有助于上下文的文件夹结构）

从 Visual Studio 代码启动并附加到 NW.JS 程序

Launch and Attach to NW.JS program from Visual Studio Code

nw.js

visual-studio-code