Visual Code debugging in Chrome

I’m using Visual Code for my React development and I’m using Chrome as my browser – I want to debug my React code in Chrome using Visual Code, so let’ see how it’s done.

First off, check out Introducing Chrome Debugging for VS Code, secondly VS Code – Debugger for Chrome.

Or, if you prefer, here’s the steps

  • Ctrl+Shift+X within Visual Code to load the Extensions list
  • Search for Debugger for Chrome and install it (if not already installed)

You’re going to need a launch.json file in the .vscode folder, here’s a minimal example

{
    // 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",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        }
   ]
}

In the above we have two configurations, both for Chrome, one launches Chrome with the supplied URL, the second attaches to an existing instance of Chrome.

If you now choose the option Run | Start Debugging, Chrome will launch with your URL loaded. You can place breakpoints in your code (before or after you start debugging) and you’re application will break at these breakpoints as you’d expect and you can inspect variables etc. So basically a full debugging experience.

Default commands within debug mode are as follows

  • F5 Continue
  • F10 Step Over
  • F11 Step Into
  • Shift+F11 Step Out
  • Ctrl+Shift+F5 Restart
  • Shift+F5 Stop

To attach to an existing running instance of Chrome, ensure you start Chrome with the following command line parameters –remote-debugging-port=9222, for example create a shortcut link with Target “C:\Program Files\Google\Chrome\Application\chrome.exe” –remote-debugging-port=9222.

You’ll also need to ensure only this instance of Chrome is open/running and then you can run the “Attach to Chrome” option.