VSCode Chrome Debugging

Blog, Linux



Debugging javascript running in Chrome using VSCode

Installation steps:

  • Install mocha NPM module
    •         npm install
        npm install mocha chai --save-dev
        sudo npm install -g mocha
  • Install Debugger for Chrome plugin in VSCode
  • Create a launcher (edit launch.json)
    •       # In this example, the nodejs server is running on port 1337
      # The page to open is mypage.html located in public folder of the workspace
      {
        "version": "0.2.0",
        "configurations": [
          {
              "name": "chrome debug",
              "type": "chrome",
              "request": "launch",
              "url": "http://localhost:1337/mypage.html",
              "webRoot": "${workspaceFolder}/public",
              "smartStep": true
          }
        ]
      }
  • Launch the launcher you created
  • Set up breakpoints (breakpoints seems to be lost between lanches)
  • Activate code to debug from button click or other event in web browser

References: