Debugging Node.js application using Chrome DevTools

During the development of any software application, sometimes a developer may need to debug the code to understand the flow of execution or even to fix a bug. I have seen JavaScript developers prints the output/value on the console using console.log() to debug the node application.

This is definitely not an efficient way to debug the code. You have to log the values in various places, hence you need to repeat console.log() multiple times. Also, you need to take them off before committing your code. This would  slow down the development time and mess up the code.

Debugging your node application using Chrome DevTools is one of the simple and efficient ways.

Here are steps to debug your node application.

1. Run the application using --inspect flag.

Once your server up and running…

2. Open this URL in your Chrome browser : about:inspect

3. Click on Open dedicated DevTools for Node

You will get a dialog box where you need to provide your application end-point and click on Add connection

You can click on the Sources tab and navigate to your application folder. You will be able to debug your code here.

In the below screenshot I have kept a breakpoint on line 8 where I’m finding out the parameter sent to the /number route which is 30.

You can debug your server-side JavaScript code just like how you debug your client-side JavaScript code.

Advertisements

Getting Repository Insights From Git

GitHub has some cool features. One of the page on GitHub I usually go through when I come across any popular repository is its contributors page.

Checkout: https://github.com/duckduckgo/zeroclickinfo-goodies/graphs/contributors

Repository Growth

Contributors

 

From the above example, we can get to know many statistics like how the repository is growing, number of people contributing, number of commits they have made and lot more.

Apparently, my team uses a private repository on Bitbucket and Bitbucket don’t have anything like contributors page just like how we see above. Maybe because Bitbucket is mostly used by enterprises to host private repositories and they won’t have any external contributors. It makes sense GitHub having contributors page because it hosts 1000s of open source projects and has numerous contributors.

Since Bitbucket doesn’t have this feature, I thought of exploring some git commands to extract these statistics from my git repository. [Got one more opportunity to learn more about Git 🙂 ]

To start with, I figured out how to find number of commits made by each developer.

$ git shortlog -s -n

This would give me a list of all the contributors with number of commits they have done.

To be continued…

Summing Up – 2016

How was 2016 to me ?

I always say to my friends that life should be like DSCE (My College) campus. It is full of up’s and down’s since it is constructed on shavige malleshwara hills.

Many things went really well, also few things didn’t go well. But learned more from things which went wrong. It is the hard work and determination which will always help you to succeed.

Inspirational talks by Abdul Kalam, Steve Jobs, Bill Gates and many others made me not to loose my hopes at anytime.

“Learning gives creativity.

  Creativity leads to thinking.

  Thinking provides knowledge.

  Knowledge makes you great!”

– Abdul Kalam

Some of the highlights :

At the beginning of the year, we fought for #Netneutrality #SaveTheInternet. Part of the protest which was conducted on Jan 2nd. Took part in #FreedomHack hackathon.

Hosted DuckDuckGo’s global Quak and Hack.

Started contributing to WikiToLearn, KDE project. Learned more about MediaWiki software.
Workshops at my GLUG.
My biggest dream got fulfilled by participating in Google Summer of Code (2016).
Worked with SwiftCode team to share the knowledge. Teaching students some new technologies.

Currently, mentoring in Google Code-In under KDE organization.

All good. 🙂
Looking for another great year ahead. 🙂
Wish you also a great and prosperous new year. 😀

Mentoring for Google Code-in – WikiToLearn

Google Code-in has just begun. I’ll be mentoring this time. 🙂

If you know any pre-university students who are interested in computers or open source please do inform them about this. Task varies from coding, documentation, training, outreach, research, quality assurance and user interface. Also, students earn prizes for their successful completion of tasks.

What is Google Code-in ?

Google Code-in is a contest by Google to introduce pre-university students (ages 13-17) to open source software development. Since 2010, over 3200 students from 99 countries have completed work in the contest.

What I’ll be doing ?

I’ll be mentoring for tasks under WikiToLearn, KDE organization.
I have published a task related to WikiToLearn community : What can I do for WikiToLearn

I’ll be helping students with code and design for this task.

I have few other tasks in my mind. I may publish them as we move on (based on our progress).

Why I’m doing this ?

Well, I just love open source and like helping others to get into FOSS. And WikiToLearn, KDE is a great community to work with.
I strongly believe in it’s philosophy – “Knowledge only grows if shared”. It feels good to help the younger generation to get into community so that our community grows big.

Join WikiToLearn now and contribute however you can. 🙂

SwiftCode at SJBIT

October 22nd – 24th we had our SwiftCode workshop at SJBIT college.
[To be continued…]

SwiftCode at BNMIT

Firstly, check out our technology stack :

It is Play framework, REST API, Java, AngularJS, MySQL, we deploy our application on AWS, Heroku. All our development happens over Lubuntu, a lightweight and fast operating system. We make use of Git along with GitHub for version control.

What is SwiftCode ?

SwiftCode program is intended to show a modern age computer science graduate how to build scalable and robust applications using state of the art techniques and design methodologies that have shaped software today.

This blog post beautifully explains how we set up collaborative development environment for our workshop : How to Quickly Set Up Collaborative Software Development Environments

On August 20th, we hosted our first workshop at BNMIT engineering college, Bangalore. We had 25 students from Computer/Information Science department.

On the first and second day, Sandeep and Akshay took the session on Java Play framework, explaining how to build a RESTful application. They completed the backend side of the application. Students were often made to commit and push their code on Github. At the end of day 2, Shrita showed how to test our APIs using the Postman.

On the third day, Prarthana took a session on front-end development, talking about how responsive websites could be built using bootstrap, architecture of Model-View-Controller (MVC) and AngularJS.

At the end of the training, all students were able to build a social media (similar to facebook) application on their own. They had soo much fun and learned a lot.

You can see all the repositories created by them at our GitHub org : https://github.com/swift-code

This slideshow requires JavaScript.

Image source : SwiftCode

It’s a great start to our long journey. Keep waiting to know about our next stop! 🙂

[To be continued…]

One last step for completion of Google Summer of Code – KDE – WikiToLearn

The Google Summer of Code 2016 is coming to an end, just couple of days left.

The good thing is that I’m also almost done with my project and enjoying my free time. 🙂

I have published the screencast of how my project (Collaborative editor extension) works on my laptop.

YouTube : https://youtu.be/lf1Kg0gVIWk

I had built the extension on normal MediaWiki.
I tested it on my local instance of WikiToLearn i.e http://tuttorotto.biz (URL is accessible only if you are running its local instance)
It works good and as smooth as it was on MediaWiki.

The things I’ve planned to work on these final days are :

* Write good documentation. Since my project was bit complicated, I do feel it requires a good documentation on how does it work, how to use it and configuring it.

* It may need some tweaking on UI so as to match with the current skin of WikiToLearn. It would be easy, we can do it anytime but my focus is on get the collaborative editing work good.

* I’m curious to know how it would perform when we deploy it on staging or production server. I know WikiToLearn will be used by the huge number of people every day and hence it will have high traffic.

I’m also looking for any good tool to write my documentation. Maybe GitHub wiki, ReadTheDocs or a blog post would be fine I think.

Hope all these goes well. 🙂

Cheers!

[Edit]
Testing Rich Elements.

YouTube : https://youtu.be/T3KyDwNi_VM