Launch Chrome while debugging Puppeteer NodeJS application in VS Code locally

Question

I was going through this tutorial where the author uses VS CODE functionality of debugger(CTRL+SHIFT+D) and launch the debugger. After clicking play icon of debugger, chrome automatically launched.

After 4:56 minutes gone from this video can be clearly seen how the chrome launched automatically.

I am trying to develop the same app using Puppeteer in NodeJS with help of VS Code editor.

Here, is my 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"
    //     }
    // ]
}

Also, I have gone through these links as well, still no luck Debug with Visual Studio Code not working

And throwing an error similar to the one I am receiving,

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>

If you will see my launch.JSON file and there will be commented configuration array object which when uncommented results to

node --inspect-brk=28904 index.js

Debugger listening on ws://127.0.0.1:28904/463ec663-1802-496f-bfc9-5354559c655c

For help, see: https://nodejs.org/en/docs/inspector

Debugger attached.

Waiting for the debugger to disconnect...

Please let me now how can I launch a Chrome instance while developing the Puppeteer application in NodeJS.

Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer, Nov 25 '19 at 08:48

score 0 · Answer 1 · answered Nov 25 '19 at 05:33

I've created the workspace of the VSCode project and made the app.js file as the main file of the app, then add this to the setting JSON file and everything's going well. It's my workspace setting JSON file of my project.

{
  "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": []
  }
}

Hope it'll help you.

score 0 · Answer 2 · answered Sep 21 '21 at 17:41

0

Works great for me like that:

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

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

answered Sep 21 '21 at 17:41

Rodrigo Marros

33
4

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 21 '21 at 17:55

Launch Chrome while debugging Puppeteer NodeJS application in VS Code locally

2 Answers2