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
  • Simple Debugging
  • Logpoints

Was this helpful?

  1. Exercise 4 - Debugging

Simple debugging

PreviousDebuggingNextSimple launch config

Last updated 5 years ago

Was this helpful?

VS Code includes a debugger for Node.js out-of-the-box. You can run any JavaScript file with the debugger without any configuration whatsoever.

Simple Debugging

Debug the "index.js" file in the "1-simple-debugging" folder and inspect the response.data.results object

  • Open the "index.js" file in the "1-simple-debugging" folder

  • Click in the left-hand margin next to line 12 to add a red dot

  • Press F5

  • Select "Node.js" from the prompt

  • The application will run and the breakpoint will be hit

  • VS Code will also open the debug panel

  • Expand the "response" object on the right-hand side under "variables" and file the "results" object

Note that you can also use the "Debug Console" in the bottom Panel and just enter the name of the command or object you want to run/inspect.

Logpoints

While debugging is normally associated with breakpoints, VS Code has a concept called "Logpoints" . These are breakpoints that simply log out values to the Debug Console. This is useful for when you want to simply inspect a value, but you don't want to have the whole application halt. It's a nice substitute for console.log.

Add a log point to the application to log the value of response.data.results to the Debug Console. Run the app and view the log.

  • Right-click the left-hand gutter next to line 12 and select "Add Logpoint"

  • Enter Response object is: {response.data.results} and press Enter

  • Press F5 to run the "index.js" file with VS Code

  • View the Logpoint output in the Debug Console

Note that if your Logpoint is not being logged out, it may be because you have a syntax error. If you have double-checked and it is still not being loaded, reload the VS Code window by opening the Command Palette (Cmd/Ctrl + Shift + P) and selecting "Reload Window".

If you want an expression evaluated, you must wrap it in {}