Debug Angular application in VSCode and Chromium

Posted on | by Oleg K.

If you want debug Angular application in VSCode and Chromium in Linux that you should’t install extensions for that! You need add only one file launch.json in your project with this configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}",
      "runtimeExecutable": "/usr/bin/chromium",
      "runtimeArgs": [
        "http://localhost:4200",
        "--new-window",
        "-user-data-dir=${workspaceFolder}/DevProfile",
        "--remote-debugging-port=9222",
        "--disable-background-networking"
      ]
    }
  ]
}

Important notes

  1. check path to chromium binary file, for me it’s «/usr/bin/chromium».
  2. maybe you don’t need create user-data-dir for debug action.
  3. if you see error «unverified breakpoint» in VSCode that meen you need check path url and webRoot fields in your launch.json.