Debugging Node.js code can prove challenging for many people. It often involves putting
console.log
on every corner of your code. But, what if I were to tell you there is a simpler method? In this article, we will be looking at how you can use VS Code to debug a Node.js application.- A alternative solution I've found is to simply launch code from the shell after you pick your node using nvm. You need to first open the command pallet and select 'install 'code' into path'. And then launch a terminal and select your node via nvm and then launch 'code'.
- Stream remote service logs in Visual Studio Code. View (tail) any output that the running app generates through calls to console.log. This output appears in the Output window in Visual Studio Code. In the Azure App Service explorer, right-click the app node and choose Start Streaming Logs.
- Next video: Code Editing in Visual Studio Code. Download and install VS Code. Create a new file. See an overview of the user interface. Install support for your favorite programming language. Change your keyboard shortcuts and easily migrate from other editors using keybinding extensions. Customize your editor with themes.
Visual Studio Code is able to detect that this is a Node.js project, and as a result, automatically downloaded the TypeScript typings file for Node.js from NPM. The typings file allows you to get autocompletion for other Node.js globals, such as Buffer and setTimeout, as well as all of the built-in modules such as fs and http. Search results for 'node', Visual Studio Code on marketplace.visualstudio.com.
Meet the Savior
Visual Studio Code (VS Code) is a code editor made by Microsoft that is used by developers worldwide due to the many tools and features it offers. Its features can be further enhanced by the use of extensions. VS Code can also be used to debug many languages like Python, JavaScript, etc. and has made debugging Node.js apps a very simple and straightforward process.
Before proceeding, make sure you have the VS Code editor installed on your computer. If not, download the latest version from here.
The Setup
Open the Settings by pressing
CTRL+,
. You can also open the Command Palette (Ctrl+Shift+P
) and type Preferences: Open Settings(UI), or find the gear icon in the lower left corner of the interface. In the search box, type in “Node.js”. On the left side under Extensions, click Node debug. Look for Debug > Node: Auto Attach. It is set to disabled by default. Click it and set it to on. This will always be enabled for Node.js applications from now on. You can look for an Auto Attach: On statement at the bottom blue bar in VS Code to confirm.Next, open the Node.js file you want to debug and set some breakpoints. Do this by clicking on the left side of the line numbers where you would like your code to stop. A red dot will appear when a breakpoint has been set. Breakpoints will aid in identifying the line or region where your code is failing. You can place them in between suspected regions or randomly if you have no idea where the bug is hiding.
Open the debug panel by clicking the bug icon on the activity bar. You can also press
Ctrl+Shift+D
to open the same panel.Debugging without Configurations
If no prior configurations have been made, there are 2 tabs in the debug panel. Run and Breakpoints. In the “Breakpoints” panel you can activate and deactivate your breakpoints using the checkboxes. In the “Run” tab, there are 2 options, Run and Debug and Node.js Debug Terminal.
Click “Node.js Debug Terminal” to open the built-in terminal. Switch to the debug console using
Ctrl+Shift+Y
or by pressing “Debug Console”. This is where you will view the debug logs. To start the debugging process, press the Run and Debug button on the debug panel and select Node.js if prompted. You can also run the app on a terminal using the --inspect
flag like this node --inspect <filename>
.Debugging with Configurations
Press create a launch.json and select Node.js in the prompt to create a launch.json configurations file. You can also create it via Run>Add Configuration and select Node.js. By default, it contains the following content:
You can add more configurations via the floating “Add configuration” button. (Learn more about the different options available here.) The configurations tell VS Code how to handle debugging.
![Node Visual Studio Code Node Visual Studio Code](/uploads/1/1/7/9/117936266/472347770.png)
Then run the app in a terminal using the
--inspect
flag like this node --inspect <filename>
.Example: node --inspect server.js
. You can also start the debugger by pressing F5
.Debug with Nodemon
Nodemon is a tool that auto-reloads the server and reattaches the debugger after you make changes to your app. You can install it via npm using
npm i nodemon
. Then add the following under configurations in your launch.json.You can then launch your app normally, replacing
node
with nodemon
. Example: nodemon --inspect <filename>
.If you get this error:
nodemon: command not found
, it means nodemon was not installed properly. Try using this: sudo npm install -g --force nodemon
, which worked in my case.If you are using Windows,
npm i -g nodemon
should work. Edit and save your app to see nodemon in action. You can then continue with the debugging process below.For more on using nodemon and VS Code, click here.
The Debugger in Action
The terminal prints some lines along with
Debugger Attached
. The bottom blue bar color in VS Code turns to orange after the debugger is attached to your app. There also appears a floating button with play/pause, restart, and stop at the top center in VS Code.The debugger pauses at the first breakpoint. You can follow through and resume the process using the play button. The debugger prints all
console.log
instances in your code to the debug console. If the app breaks, the logs will be shown in the debug console.Conclusion
In this article, we have looked at how you can more easily debug your Node.js app using VS Code. VS Code comes in handy especially if you don’t like to switch between programs and windows. From now on, I hope it won’t be a problem debugging Node.js apps, especially if you are already a VS Code user.
About the author
Geoffrey MungaiMungai is an undergraduate majoring in Computer Science. He is a self-taught full-stack web developer who enjoys working on open-source projects and participating in development festivals. Mungai is interested in web development and machine learning. When he is not coding, he is probably biking downhill somewhere or hanging out with friends.
I am amazed at the adoption of Visual Studio Code by developers from all platforms and languages. According to the 2019 Stack Overflow Developer Survey, VS Code is dominating. The primary reasons I use VS Code are its great support for debugging JavaScript and Node.js code, and how easy it is to customize with free extensions available in Visual Studio Marketplace.
However, there are thousands of extensions available! How do you know which ones are good to use?
One way is to look at an extensions average rating and the number of downloads to gauge its popularity. Another way is to read personal opinion posts like this one. And here you are!
Here are my top picks for Visual Studio Code extensions for Node.js developers.
Bracket Pair Colorizer 2
I try to keep my code as simple as possible and not nest too many things. Unfortunately, sometimes it is unavoidable. Bracket Pair Colorizer 2 colorizes matching brackets, making it easier to visually see which opening and closing brackets, braces, or parentheses belong to each other.
npm
Comic collector price guide. The npm extension provides two features: running npm scripts defined in the
package.json
in the editor and validating the packages listed in the package.json
.npm Intellisense
The npm Intellisense extension introduces autocomplete behavior when you use
require()
to import modules into your code.ESLint
When I initialize a new Node.js project folder, the first thing I install from the terminal is ESLint.
The ESLint extension uses your local ESLint and configured rules to look for common patterns and issues in JavaScript code, and is designed to help you write better code with fewer bugs. ESLint can also reformat your code to make it more consistent, depending on the rules you have enabled for your project. Be sure to enable Auto Fix On Save (
'eslint.autoFixOnSave': true
) in your VS Code settings.You can initialize an ESLint configuration file in your project with this command.
My current
.eslintrc.js
looks like the following.Code Spell Checker
I don’t know about you, but it really bugs me when I discover I’ve misspelled function names, variables, comments, or anything else in my code. Misspelled code, as long as it’s consistently misspelled, works fine, but mistakes can still be frustrating or embarrassing.
Well, those days are over with Code Spell Checker! One nice thing is the extension understands
camelCase
, PascalCase
, snake_case
, and more. Another great feature is there are dictionaries available for Spanish, French, German, Russian, and a number of other languages.Auto Close Tag
More recent versions of VS Code automatically create closing tags when you are working in an HTML or XML file. For other file types, such as JavaScript, Vue, and JSX, Auto Close Tag will save you some typing!
DotENV
It’s quite common to configure Node.js applications using environment variables. And, one of the most popular modules for managing environment variables is dotenv. The DotENV extension for VS Code adds convenient syntax highlighting when editing a
.env
file.Path Intellisense
Node Version Visual Studio Code
The Path Intellisense extension adds autocomplete support for file paths and names, reducing typing as well as the introduction of bugs related to wrong paths.
MarkdownLint
Good code and good documentation go hand-in-hand. I prefer to write README’s and other documentation in markdown format. The Markdownlint extension can help you make sure your markdown syntax is in good form!
Material Icon Theme
The Material Icon Theme adds a ton of icons to VS Code for different file types. Being able to quickly distinguish different files in project can be a great time saver!
Honorable Mention VS Code Extensions for Node.js
These extensions didn’t make the top 10 list, but are still useful in some scenarios for Node.js developers!
- Encode Decode - Adds commands to quickly convert text to and from various formats, such as Base64, HTML entities, and JSON byte arrays.
- Rest Client - Make HTTP requests directly from your editor and view the responses in a separate window. Great for testing and prototyping APIs.
- Better Comments - This extension helps you create more “human-friendly” comments by adding highlights to different types of comments.
Learn More about Building Secure Node.js Apps in Visual Studio Code
Want to learn more about building secure Node.js applications? Check out these other posts!
Additional links you may find useful!
Node Visual Studio Code
![Debug Debug](/uploads/1/1/7/9/117936266/889934312.png)
Visual Studio Code Node Project
Please enable JavaScript to view the comments powered by Disqus.