Cannot debug in VS Code by attaching to Chrome

When using the configuration url, vscode will search for a tab with the EXACT url and attach to it if found.

Use the configuration urlFilter, which can have wildcards like *, to attach the debugger to any sub route in your url.

e.g. "urlFilter": "http://localhost:4200/*"

The complete exacts steps to take:

1. configure your launch.json file to looks something like this:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "chrome",
          "request": "attach",
          "name": "Attach to Chrome",
          "port": 9222,
          "urlFilter": "http://localhost:4200/*",
          "webRoot": "${workspaceFolder}"
        }
      ]
    }
   

2. Close all opened chrome instances (make sure that all of them are killed using task manager in windows).

3. Launch chrome with the following parameter: –remote-debugging-port=9222

   Make sure that the port in this parameter is the same as the one configured in ‘port’ property of the attache to chrome configuration in the launch.json file (like the example above)

   You can add this parameter in your chrome shortcut properties by:

   • Right click your shortcut file and select properties

   • Chain it to Target property, e.g.

     “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –remote-debugging-port=9222

4. Navigate to your site. In this example, http://localhost:4200

5. Run ‘Start debugging’ in VS Code.