VSCode + Chrome Debug in attached mode

vscode-chrome-debug.md

VSCode + Chrome Debug

launch mode

1. VSCode launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "name": "vuejs: chrome",
      "request": "launch",
      "breakOnLoad": true,
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "port": 9222,
      "skipFiles": ["<node_internals>/**"],
      "runtimeExecutable": "/usr/bin/google-chrome-stable",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

2. Set a breakpoint in VSCode and start debugging!

attached mode

1. VSCode launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "port": 9222,
      "skipFiles": ["**/node_modules/**"],
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    }
  ]
}

2. Run chrome with this flag:

• Linux/Mac: google-chrome-stable --remote-debugging-port=9222
• Windows: start chrome --remote-debugging-port=9222

3. Set a breakpoint in VSCode and start debugging!