VSCode Chrome Debugging

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:

• https://www.sitepoint.com/debugging-javascript-projects-vs-code-chrome-debugger