VS Code Can Do That - Workshop
Main
Main
  • VS Code Can Do That Workshop
  • Essential Keyboard Shortcuts
  • Exercise 1 - Customizing The Editor
    • Customizing The Editor
    • Switch themes
    • Install a new icon theme
    • Switch fonts
    • Editor tweaks
    • Change default Settings view
    • Easily identify editor instances
  • Exercise 2 - Productivity Tricks
    • Productivity Tricks
    • Essential navigation shortcuts
    • Creating HTML with Emmet
    • Styling with Emmet
    • Update image sizes
  • Exercise 3 - Navigation And Refactoring
    • Navigation And Refactoring
    • Moving, Duplicating and Deleting
    • Folding sections
    • Multiple cursors
    • Rename refactor
    • Finding things
    • Extract refactor
  • Exercise 4 - Debugging
    • Debugging
    • Simple debugging
    • Simple launch config
    • Auto attach
    • Debugging browser apps
    • Compound debug configurations
  • Exercise 5 - Docker
    • Docker
    • Dockerizing an application
    • Running and inspecting images
    • Docker compose
    • Debugging Docker containers
  • Exercise 6 - Remote Development
    • Remote Development
    • Create a remote container
    • Create a new function in the container
    • Handling extensions
  • Exercise 7 - Working With Data
    • Working with data
    • Working with MongoDB
    • Working with SQLite
    • Working with MySQL
  • Exercise 8 - Git and Source Control
    • Git and source control
    • Cloning repos with VS Code
    • Common Git workflows
    • Branching and merge conflicts
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