Question

是否有人有一个launch.json示例，可用于Visual Studio代码以附加或启动NW.JS桌面程序。是的，我知道NW.JS使用铬调试，你可以直接调试它。但是能够从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扩展程序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 2

我可以使用修改后的Debugger for 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
        }
    ]
}

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

在文件 [extensions path] \。\ vscode \ extensions \ msjsdiag.debugger-for-chrome-2.3.2 \ node_modules \ vscode-chrome-debug-core \ out \ src \ chrome \ chromeDebugAdapter.js < / em>更改函数shouldIgnoreScript（）返回false。

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

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

这个设置对我有用，但它仍然是片状的，调试器websocket连接似乎随机掉落。但是它的可靠性足以在不使用大量console.logs（）的情况下进行调试。

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 Code启动并附加到NW.JS程序

3 个答案: