stefanuddenberg
1/3/2019 - 7:01 AM

VS Code Chrome Debugger -- How to configure

  1. npm run dev
  2. Debug with "WORKING" option
  3. Profit!

Required using "WriteFilePlugin()" in webpack config.

{
    // 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": "WORKING -- Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "port": 9229,
        },

        {
            "type": "node",
            "request": "launch",
            "name": "npm run dev",
            "port": 9222, // 9229
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run", "dev"],
            "protocol": "inspector",
            "console": "integratedTerminal",
        },

        {
            "type": "node",
            "request": "launch",
            "name": "webpack-dev-server",
            "program": "${workspaceRoot}\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js",
            "cwd": "${workspaceFolder}",
            "sourceMaps": true,
            "trace": true
        },

        {
            "name": "Attach to url with files served from ./dist",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "<url of the open browser tab to connect to>",
            "webRoot": "${workspaceFolder}/dist"
        }
    ]
}