Debugging browser apps

Most web developers have become quite comfortable with their browser development tools. However, web development is quite possibly the only platform where code is written in one place, and debugged in another. It is far easier to debug code in the same place where you write it.

The Chrome Debugger extension for VS Code makes this possible. I have included it in the VS Code Can Do That extension pack.

Exercise
Answer
Exercise

Add a launch.config to the "3-debug-browser" apps project. Add a breakpoint to the updateColor method in the src/app.js file.

Run the project and then attach the VS Code debugger.

Answer
  • Open the Debug View (Cmd/Ctrl + Shift + D)

  • Open the dropdown list at the top and select "Add Config (3-deug-browser-apps)

  • Select "Chrome" from the prompt

  • This will create a new folder in "3-debug-browser-apps" called ".vscode". Inside there will be a file called "launch.json". VS Code will open this file by default.

  • Change the name to "Launch Project 3"

"name": "Launch Project 3"
  • Change the "url" value to "localhost:3000"

"url": "http://localhost:3000"
  • Open the integrated terminal and make sure you are in "3-debug-browser-apps"

  • Run npm start

  • A browser instance will launch with the running app

  • Return to VS Code

  • In the Debug View, make sure "Launch Project 3" is select in the dropdown list and click the green arrow

  • A new instance of Chrome will open

  • Open the "src/app.js" file in the "3-debug-browser-apps" project

  • Add a breakpoint to line 48

  • In the instance of Chrome that was opened by VS Code, change the color and click the button to update it

  • VS Code will hit the breakpoint

  • Return to Chrome and open the Developer Tools (Cmd/Ctrl + Shift + i)

  • Notice that Chrome also sees the debugger and is broken on the same line

‚Äč