How I learned the art of debugging!

With the rapid growth in the development of web application, debugging is more complex than ever. We have to support more browser, platforms, screen sizes and resolutions.

Fortunately, we have better tools 'Google Chrome Developer Tools' which brings some amazing tools I discuss in this article to inspect, locate and fix bugs in your web application.

Hi, I am Navneet Prakash, Currently, AngularJs Front End Developer at Spice Digital Limited. The story is about 9 months ago, when I landed my previous (first) job. I was super excited to make my significant contribution to grow with the company, but on the day of joining them, I was assigned to fix bugs. The application was already matured and launched. Having no prior experience in debugging deflated me like hell. To survive with this job, anyhow I managed to learn debugging a JavaScript web application. Thanks to Joe Chellman for teaching Debugging The Web JavaScript on Lynda.com became the life saver for me.

I realized the truth is: There is no silver bullet. There is no hard and fast skill you can acquire for debugging. It's acquired through time as you struggle through the first time you encounter a bug.

However using a debugger provides deeper insight into your code, Google Chrome Developer Tools are easy to built in your most popular web browser. Here I list a few techniques you can practice within your Chrome Developer Tools.

1. Drag and Drop in the Elements panel: In the Elements panel, you can drag and drop any HTML elements and change its position across the page.

2. Reference the currently selected element in the console: Select a node in the Elements panel, and type $0 in the console to reference it. If you're using jQuery, you can enter $($0) to access the jQuery API on this element, or angular.element($0) if you are using #AngularJs.

3. Use the value of last operation in the console: Use $_ to reference the return value of previous operation executed in the Console.

// Example: In the browser console
3 + 9; // 12
$_ // 12

4. Screenshot a single element: Select an element and press cmd+shift+p or ctrl+shift+p in windows to open the 'Command Menu', and select 'Capture node screenshot'.

5. Debugging a Function: Press Ctrl + P for windows. Open the script file in Sources tab. Write in the console:

debug(name_of_the_function); // so the anytime passed funtion is called
// it breaks execution and starts debugging.


// To stop debugging this function, run:
undebug(name_of_the_function);

6. Inspecting DOM Elements Using JavaScript: Opens and selects the specified element or object in the appropriate panel: either the Elements panel for DOM elements or the Profiles panel for JavaScript heap objects. The following example opens the document.body in the Elements panel:

inspect(document.body);
var btn = document.getElementById('myButton');
inspect(btn); // inspecting DOM element using JavaScript.

7. Getting all the event listeners attached to an HTML element using vanilla JavaScript: Returns the event listeners registered on the specified object. The return value is an object that contains an array for each registered event type e.g click or keydown. The members of each array are objects that describe the listener registered for each type.

var btn = document.getElementById('myButton');
getEventListeners(btn);
// Output: Object {scroll: Array[1], mousedown: Array[1]};

8. Get all event listeners attached to DOM element using jQuery:

var el = document.getElementById('someId');
jQuery._data(el, 'events');

9. Monitor (spy) when a particular function is being fired: When the function specified is called, a message is logged to the console that indicates the function name along with the arguments that are passed to the function when it was called.

function sum(x, y) {
    return x + y;
}

monitor(sum);

unmonitor(sum); // stop monitoring

10. Monitoring an HTML element when its event is fired: The first parameter is the object to monitor, returns all events if second argument is not provided. To specify an event to listen to, pass either a string or an array of strings as the second argument.

var btn = document.getElementById('myButton');
monitorEvents(btn, "click");

Conclusion: Debugging is crucial to successful software development, but even many experienced programmers find it challenging. Google Chrome Developer Tools has a lot to smooth your debugging experience than I could explain in a single post.

I welcome your comments, what challenges you face while debugging, or anything new you know and want to add to this post. Thank you for reading.