Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Using the VS Code debugger with Node

    Rich BuggyRich Buggy
    vscodeVS Code

    This lesson shows you how to debug your Node.js applications using the VS Code debugger.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: I'm going to start by creating a new node application that loops through the numbers zero to nine and prints each one twice. Open the debug view in VS Code. On a Mac, you can do this with the Shift command D keyboard shortcut.

    I don't currently have a debug configuration, so I'll need to add one. The default debug configuration correctly uses node to execute our index.js script, so I don't need to make any changes. I'll then have a break point in my code and launch the debugger which will run the application.

    Node stops execution at my break point allowing me to inspect the value of my variables in the debug view, all by moving my mouse over the variable name in the editor. I can continue execution until the next break point by clicking continue.

    As I only have one point, it stops at the same spot but the value of the variable is now one.

    I can also step through the code one line at a time using step over. This will execute the current line of code and stop at the next one. I'm going to stop debugging by clicking on the stop button and make the code a little more complicated. To do this, I'll create a new file called logo.js and add a function that logs its arguments to the console twice.

    Inside the index file, I'm going to use require to import the new logo function. I'll replace my two console.logs with a single logo call. This time, when I launch the debugger, it stops at my break point on the line with the logo call. Instead of stepping over the logo function, I'm going to step into it using step in. This allows me to debug the code inside the logo function. Using step over, I can now step through the code inside the logo function.

    When I stepped pass the end of the logo function, it takes me to the next line in the code after the logo was called. I'll continue to the break point again, then step back into the logo function. Sometimes, you'll step into a function then realize you don't want to continue debugging inside that function, but you would like to continue from where that function returns. This can be done using step out.

    Finally, I can restart the debugging session using restart.