Voice of a Developer: Debugging Capabilities of VSCode - Part Seven

JavaScript is language of the Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript.

Before moving further let us look at the previous articles in the series:

• Voice of a Developer: JavaScript Data Types - Part One
• Voice of a Developer: JavaScript Objects - Part Two
• Voice of a Developer: JavaScript Engines - Part Three
• Voice of a Developer: JavaScript Common Mistakes - Part Four
• Voice of a Developer: Editors - Part Five
• Voice of a Developer: VSCode - Part Six

In last article we learnt about VSCode – an awesome editor. In this article we’ll learn debugging capabilities of VSCode. Before we move forward, let us setup NodeJS application.

Setup Node.js application

I am sure you must have heard about LAMP. Similarly, there is a new stack for webapplication development is MEAN (MongoDB, Express.js, AngularJS, and Node.js) — used to develop web applications.

To install Node on windows you can download online or use Chocolate Windows download manager to install it



Express.Js:

It is a framework for building and running Node applications. Below command will install it globally
npm install -g express-generator

Now, scaffold a new application,

express webApplication1



Hence it’ll create a basic setup of files to run Node.js application. Now, we can install node modules by using npm install command,




The tree structure would look like below,



Package.json file contains dependencies modules and pointer where to start. We’ll run the application using below command.

npm start

And it will open the application at 3000 port and you can browse to http://localhost:3000 to run the application,



Let us read detail in ./bin/www file. Use F1 to use open command palette to get there.



It creates an http server at port 3000 (default). If you would like run your application at another port, you could change the one that you can modify in ./bin/www file

Setup application in debug mode

Before we enable debugging Press F5 to launch application in debug mode and choose Node.js. It will create launch.json configuration file like tasks.json earlier



Run application

You can run application by F5 and see below output on Debug Console,



Run localhost:3000 and your node application is up and running (I have also attached Debug message),



Debugging

• VSCode has built-in debugging support for Node.js (JavaScript, TypeScript, and any other language that gets transpiled to JavaScript). You can open debug pane by clicking its icon and see various windows.
  
  
• Breakpoint: Like Visual Studio Edition, you can press F9 and set breakpoint. All breakpoints will appear in breakpoints window. Open app.js and set breakpoints,
  
  
  
  
  Now you can run by pressing F5 and execution will stop at the breakpoint. Press F10, F11 depending upon you want to Step Into or Step Out.
  
  
  
  It also allows you to create function breakpoints you can also do that in Breakpoint window,
  
  
  
  You can set breakpoints on functions, variables etc which you create in your application. There are two other windows helpful for debugging, i.e, Watch & Call Stack.
  
  
  
  You can also evaluate expressions in Debug Console.

Summary

The power of VSCode lies in debugging capabilities it offers. I never before worked on any editor offering debugging in JavaScript language. Please share your comments/ feedback.

Read more articles on Visual Studio:

• Use Developer Assistant Extension With Visual Studio 2015
• Build, Rebuild & Clean Solution: The Facts