Using Chrome Debugger With Visual Studio Code and Webpack

Question

I'm trying to get debugging in Visual Studio Code with an application running via Webpack. There is lots of contradictory information around, and the documentation relating to usage with Webpack is very poor.

I understand that I need a launch.json file in the .vscode dir in the root of my project, and it appears that there are two approaches:

1. Launch Webpack (using yarn start which maps to webpack-dev-server --env development --open, then have VSCode attach to that.

2. Have VSCode launch webpack in Chrome and then attach to that.

After a couple of hours trying different things I have had no success.

If I run webpack and try and attach to it using the following launch.json:

{
  "version": "0.0.0",
  "configurations": [
    {
      "name": "Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:8080/",
      "webRoot": "${workspaceRoot}"
    }
  ]
}

I get an error in VSCode saying:

Got a response from the target app, but no target pages found

What is the best way to approach this?

Should I be trying option 2 and running Webpack from VSCode?

Note that running yarn start runs the application successfully in Chrome.

Answer 1

When using the "request": "attach" config you need to specify 'urlFilter' instead of 'url'. Note that 'urlFilter' uses wildcard, so your config should look like this;

{
  "name": "Attach",
  "type": "chrome",
  "request": "attach",
  "port": 9222,
  "urlFilter": "http://localhost:8080/*",
  "webRoot": "${workspaceRoot}"
}

Ref; https://github.com/Microsoft/vscode-chrome-debug#other-optional-launch-config-fields