在本地 VS Code 中调试 Puppeteer NodeJS 应用程序时启动 Chrome

Question

我正在查看tutorial，作者使用调试器的 VS CODE 功能（CTRL+SHIFT+D）并启动调试器。点击调试器的播放图标后，chrome自动启动。

从这个视频过去 4:56 分钟后，可以清楚地看到 chrome 是如何自动启动的。

我正在尝试借助 VS Code 编辑器在 NodeJS 中使用 Puppeteer 开发相同的应用程序。

这里是我的 launch.json

// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

{

    "version": "0.2.0",
    "compounds": [
        {
            "name": "Launch & Debug",
            "configurations": ["Launch Program","Launch Chrome"]
        }
    ],
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}\\index.js"
        }
    ]
    // "configurations": [
    //     {
    //         "type": "node",
    //         "request": "launch",
    //         "name": "Launch Program",
    //         "program": "${workspaceFolder}\\index.js"
    //     }
    // ]
}

另外，我也浏览了这些链接，仍然没有运气 Debug with Visual Studio Code not working

并引发类似于我收到的错误，

Debugging with inspector protocol because Node.js v10.16.0 was detected.
**Error processing "launch": Error: Can't find Chrome - install it or set the "runtimeExecutable" field in the launch config.**

at Object.errP (C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\node_modules\vscode-chrome-debug-core\out\src\utils.js:262:13)
at ChromeDebugAdapter.<anonymous> (C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\out\src\chromeDebugAdapter.js:69:57)
at Generator.next (<anonymous>)
at C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\out\src\chromeDebugAdapter.js:10:71
at Promise (<anonymous>)
at __awaiter (C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\out\src\chromeDebugAdapter.js:6:12)
at launch.then (C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\out\src\chromeDebugAdapter.js:52:74)
at <anonymous>

如果你会看到我的 launch.JSON 文件，并且会有注释的配置数组对象，当未注释的结果是

节点 --inspect-brk=28904 index.js

调试器监听 ws://127.0.0.1:28904/463ec663-1802-496f-bfc9-5354559c655c

如需帮助，请参阅：https://nodejs.org/en/docs/inspector

附加调试器。

正在等待调试器断开连接...

现在请告诉我如何在 NodeJS 中开发 Puppeteer 应用程序时启动 Chrome 实例。

Answer 1

我已经创建了 VSCode 项目的工作区，并将 app.js 文件作为应用程序的主文件，然后将其添加到设置 JSON 文件中，一切顺利。 这是我项目的工作区设置 JSON 文件。

{
  "folders": [
    {
        "path": "my-project"
    }
  ],
  "settings": {
        "editor.tabSize": 2,
        "editor.formatOnSave": true,
        "[javascript]": {
        "editor.formatOnSave": false
        },
        "eslint.autoFixOnSave": true
  },
  "launch": {
        "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/app.js"
        }
        ],
        "compounds": []
  }
}

希望对你有帮助。

Answer 2

这样对我很有用：

{
    "version": "0.2.0",
    "configurations": [

        {
            "type": "node",
            "name": "node launch",
            "request": "launch",
            "program": "${workspaceFolder}/index.js"
        }
    ]
}