Visual Studio Code Chrome Debugger Extension - [webkit-debug-adapter] Got response from target app, but no valid target pages found

Question

I Have an Angular/TypeScript app. I can debug the TypeScript in Chrome because I use map files.

Today I installed Debugger for Chrome from Visual Studio Marketplace. https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome

In theory I should be able to set break points in vscode but I keep getting this error when I run the debugger:

[webkit-debug-adapter] Got response from target app, but no valid target pages found

The reason for this is because I do not know how to set it up properly.

I have my app running on port 9000 using Grunt. Here is the debugger config file:

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Attach",
        "type": "chrome",
        "request": "attach",
        "port": 9000,
        "webRoot": "./app/scripts"
    }
  ]
}

Does anyone know how to attach the debugger?

Answer 1

I managed to get this working myself. For anyone else who comes across this problem, here is the config file.

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:9000/",//Change to whatever you homepage is
        "runtimeArgs": [
            "--new-window", //Open in new window
            "--user-data-dir=C:/dev/", //Can be any directory. Makes chrome load in a different directory so that it opens in a new instance.
            "--remote-debugging-port=9222" //Open in port 9222 (standard chrome debug port)
        ],
        "webRoot": "src/app/", //The directory that contains js, ts and map files
        "sourceMaps": true
    }
  ]
}