Launching Chrome and debugging from within Visual Studio Code

Question

I am using Visual Studio Code to debug some front-end javascript (for a Wordpress plugin). I am having trouble configuring the launch.json file correctly.

I can launch chrome manually and then attach to it after the fact (using an Attach request), in which case javascript breakpoints work fine fine.

If I launch chrome from within vscode (using the Launch request), it does connect (I see console output) but I don't get my breakpoints firing. I assume there is some setting incorrect in my launch.json file.

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Signup Form",
        "type": "chrome",
        "request": "launch",
        "url": "http://myclient.dev/signup-form",
        "sourceMaps": true,
        "webRoot": "../../..",
        "runtimeArgs": [
            "--remote-debugging-port=9222"
        ]
    },

    {
        "name": "Attach",
        "type": "chrome",
        "request": "attach",
        "port": 9222
    }
]

}

I've tried whatever I could think of for web root (including the full local path to the web root at 'htdocs' and the relative path you see above. It doesn't seem to care what I put in there, so maybe I'm barking up the wrong tree.

The local project folder is here:

/home/me/code/vagrant-local/www/wordpress-myclient/htdocs/wp-content/plugins/cee-signup-form

On the server, that maps to:

http://myclient.dev/wp-content/plugins/cee-signup-form

In the page 'signup-form' I include the javascript file in question, using its full url.

Obviously, I can manually go the url and then attach every time I want to debug, but having a one-click launch and debug would be far superior.

What am I doing wrong?

Solution 1

Please follow below steps:

1. Check you have installed "VS Code - Debugger for Chrome" extention.
2. First Put this code in .vscode/launch.json :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Node",
      "port": 9229,
      "protocol": "inspector",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "start"],
      "console": "integratedTerminal"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/client/src"
    }
  ],
  "compounds": [
    {
      "name": "Full-stack",
      "configurations": ["Node", "Chrome"]
    }
  ]
}

3. Go to the Debug mode in VS Code and start with 'Full-stack'.

4. Start npm

Refer this : https://github.com/auchenberg/timey

Solution 2

In my case, on Ubuntu 14.04, it worked after having added

"runtimeExecutable": "/usr/bin/chromium-browser"

I have however to start chrome in advance.

Solution 3

It turns out that it was a bug in VSCode, and it is fixed in the latest version (1.2.1). After updating, I had to do three things.

Update the Chrome Extension

In VSCode, hit CTRL+P to bring up the Command Palette, then:

Extensions: Show Outdated Extensions

At this point it will let you update them. Learn more here: https://code.visualstudio.com/Docs/editor/extension-gallery#_update-an-extension

Edit the launch config

They now require absolute paths for the web root. So, I had to change the webRoot property of the launch.json file to explicitly include the workspace root.

"webRoot": "${workspaceRoot}/../../..",

Close all copies of Chrome before debugging

This is annoying. But it works.