InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

Node.js tutorials

  • Install node.js on Ubuntu Linux
  • Install node.js on Mac
  • npm tutorial
  • Debug javascript using node and Chrome
  • Find source file location of a module
  • Find version of installed package
  • How to use pm2 to manage node.js application in production
  • NestJS Quick start tutorial on Mac
  • NextJS Quick start tutorial on Mac
  • Fix cannot find module error
 
  • Home
  • > Tutorials
  • > Web Development
  • > Node.js

Debug javascript using node-inspector, node-debug, nodemon and Chrome

By admin on Nov 22, 2015

In case you are using node to run javascript on command line, you can use Chrome to debug javascript. It support GUI debugger functionalities like adding break point, stepping over a line etc. This can be helpful to understand existing code also. Here are steps to debug javascript code using node-inspector, node-debug, nodemon and Chrome on Mac.

Install/update node

To install node use the following commands:

$ brew update
$ brew install node

If you need to upgrade node, use the following commands:

$ brew update
$ brew upgrade node
$ node -v
v5.1.0
$npm -v
3.4.1

Install node-inspector, node-debug, nodemon

Install node-inspector, node-debug and nodemon using the following commands:

$ sudo npm install -g node-inspector
$ sudo npm install -g nodemon

Note that node-debug is part of node-inspector itself. You should not install it separately.

Create test javascript for debugging

Create a test javascript file hello.js which can be used for debugging. Write the following code in it:


var x = 1;
var y = 2;
var s = x + y;
console.log("sum=" + s + "\n");
console.log("Done\n");

Run node-inspector

Run node-inspector in background. It will start a webserver on port 8080.

$ node-inspector &
Visit http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 to start debugging.

You can also run node-inspector on a specific port using –web-port argument as shown below:

$ node-inspector --web-port 8080 &

Run node-debug

Run node-debug to debug hello.js as shown below:

$ node-debug hello.js

It will automatically open http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 in Chrome browser. It will start the debugger stopped at the first line in hello.js. You can create desired break points in javascript code, etc. as shown below:
js-node-debug-in-chrome-example

Use nodemon to watch changes

In case you need to make frequent changes to hello.js, you can use nodemon to debug. It will automatically reload the new hello.js whenever there is a change.

$ nodemon --debug-brk hello.js

By using –debug-brk (instead of –debug) we are telling nodemon to break at first line. After running this command open url http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 in Chrome browser and start debugging.

Suggested posts:

  1. how to debug javascript in Chrome
  2. How to debug :hover in Chrome
  3. How to install node (node.js) on Mac
  4. Chrome – view javascript errors
  5. How to use pm2 to manage node.js application in production
  6. Edit and debug css in Chrome
  7. node-sass quick start tutorial on Linux and Mac
  8. Chrome – how to add custom http request headers
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged Brew, Chrome developer tools, Javascript, Node.js, Tutorials, Web Development
  • Browse content
  • Article Topics
  • Article archives
  • Contact Us
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress