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

Was this helpful?

  1. Exercise 4 - Debugging

Simple debugging

PreviousBefore you startNextSimple 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 {}