从 Visual Studio Code 启动并附加到 NW.JS 程序答案

【问题标题】：Launch and Attach to NW.JS program from Visual Studio Code从 Visual Studio Code 启动并附加到 NW.JS 程序
【发布时间】：2016-12-07 16:36:45
【问题描述】：

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

【问题讨论】：

标签： visual-studio-code nw.js

【解决方案1】：

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

{
"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

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

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

【讨论】：

【解决方案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:// 脚本。

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

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

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

此设置适用于我，但它仍然不稳定，并且调试器 websocket 连接似乎会随机断开。但它已经足够可靠，无需借助大量的 console.logs() 即可进行调试。

【讨论】：

我遵循了您出色的（非常高级的！）说明（请参阅更新的 launch.json），并编辑了扩展，并将所有这些放在 ws 文件夹中。我正在启动 DOM 调试器，但它仍然显示灰色断点。我可以给你看日志吗？（Windows 7、64 位）。 VScode 1.7.2（但在电脑上运行node 7.2）
啊，不幸的是它没有工作。当然，我会看看你的日志。您可以检查的一件事是调试器详细日志中的 Debugger.scriptParsed 事件，并确认提到了您的 js 文件（或在上述方法中抛出 logger.log(script.url) ）。当我第一次设置一个项目时，我遇到了一个问题，其中 Chrome 将我的 javascript 文件组合成一个 eval（可能是优化？）并且调试器跳过了这些。但在我添加更多代码后，Chrome 切换回解析整个文件并且调试器开始工作。
我在日志中添加了链接。我还尝试在 index.js 文件中添加大约 100 行 javascript。我没有看到解析消息。我在使用内置调试器进行调试时也遇到了问题。当我在 onload="start()" 方法中放置断点时，在源选项卡中看到一个大按 CNTRL-P。不是源，也不是断点。
我已经切换到 Electron，我更开心了。

【解决方案3】：

更新 Craig 的答案。

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;

【讨论】：