VS Code Can Do That - Workshop
1.0.0
1.0.0
  • Introduction
  • Essential Keyboard Shortcuts
  • Exercise 1 - Customizing The Editor
    • Before you start
    • Switch themes
    • Install a new icon theme
    • Switch fonts
    • Editor tweaks
    • Change default Settings view
    • Easily identify editor instances
  • Exercise 2 - Productivity Tricks
    • Before you start
    • Essential navigation shortcuts
    • Creating HTML with Emmet
    • Styling with Emmet
    • Update image sizes
  • Exercise 3 - Navigation And Refactoring
    • Before you start
    • Moving, Duplicating and Deleting
    • Folding sections
    • Multiple cursors
    • Rename refactor
    • Finding things
    • Extract refactor
  • Exercise 4 - Debugging
    • Before you start
    • Simple debugging
    • Simple launch config
    • Auto attach
    • Debugging browser apps
    • Compound debug configurations
  • Exercise 5 - Docker
    • Untitled
Powered by GitBook
On this page

Was this helpful?

  1. Exercise 4 - Debugging

Debugging browser apps

PreviousAuto attachNextCompound debug configurations

Last updated 5 years ago

Was this helpful?

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.

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.

  • 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