Much of time of developers spent on fixing problems. When it comes to fixes, one need to be good and fast at debugging. Debugging is part of programming.
It’s very difficult to write efficient JavaScript code without debugging. You must diagnose into code to find an actual root cause.
In the era of IE, most of the programmer debug using alert. But now a day’s many methods and tools added into browsers. Especially with firebug and chrome dev tools, lots of methods have been introduced.
Alert
Alert method is used from beginning of JavaScript development. It displays a value of string or variable into an alert box. Not much useful currently as more advanced methods available. It’s annoying to get a dialog on the page every time when line getting executes.
Syntax: alert(‘Hi’)
Console
Currently, Most of the developer used this method to debug. Console API has multiple methods to debug JavaScript code. Most useful is console.log that log this parameter on the console of a developer tool.
Various methods of console API: assert,clear,count,debug,dir,dirxml,error,group,groupCollapsed,groupEnd,info,log,profile,profileEnd,time,timeEnd,timeStamp,trace,warn
Breakpoints
Dev tools support breakpoints similar to the editor for server side languages. It stops execution to breakpoint from where you can inspect code and trace. You can Step into, out and over from there. You can on/off breakpoints without refreshing page.
Debugger
When dev tool finds debugger API while execution, it stop execution at that line, you can watch the value of variables, call stack till that code and inspect elements. Similar to a setup of breakpoint on that line. The only difference is debugger need to write into JavaScript file and will stop the execution of code every time.
Syntax: debugger;
object.observe
Very useful when user wants to debug only when properties or JavaScript objects changes. Object.observe() help you to add a listener to any JavaScript object that gets called whenever that object, or its properties, change. User can log changed value into call back to check value or add debugger to add breakpoint only when object got changed.
Unfortunately, this API is deprecated from most of the browsers. you can find polyfill.
Syntax: Object.observe(obj, callback[, acceptList])
Debug
Sometimes you want to debug on some function call and search result of function name search returns nothing may be because of minification or special chars. For such scenario debug method will help you.
When the specified function is called, the debugger is invoked and breaks inside the function on the Sources panel allowing to step through the code and debug it, similar to breakpoint at first line of that function. To turn this off, use undebug(function).
Syntax: debug(function)
Monitor
Similar to debug, This method will not break execution of code.
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.User can turn it off using unmonitor(function) method.
Syntax: monitor(function)
monitorEvents
When user needs to monitor browser event, this function is useful. When passed event on passed object called, it will log event object on console. You can specify a single event to monitor, an array of events, or one of the generic events “types” mapped to a predefined collection of events. To turn this event off , user unmonitorEvents(object[, events])
Syntax: monitorEvents(object[, events])
Well written quote from Brian Kernighan and Book “The Elements of Programming Style”:
Everyone knows that debugging is twice as hard as writing a program in the first place. So if you’re as clever as you can be when you write it, how will you ever debug it?
If you liked this, click the 💚 below so other people will see this here on Medium.
