Headache in JavaScript debugging?

We all know JavaScript debugging become headache if the code breaks in large application and this is because of not very structured of JS, when it comes, it hard to say anything what happened when and due to what.

Here I have few tips/tools, by knowing these you can make difference what what you are doing now. Most of the them are for Chrome and Firefox inspector. its not limited to Chrome and Firefox only, there are other inspectors as well. Lets list down and see one by one what all these are:

1. console.log();
2. debugger;
3. Responsive option to check all the size
4. Benchmark loops using console.time() and console.timeEnd()
5. Jump on DOM element quickly
6. Function Stack trace
7. Un-minify code easy way for debugging Javascript
8. Find function quickly
9. Use console to access element
10. Break on node changes
11. Important points in complex debugging

1.console.log();

This is the easiest and handy way to log output string on console (browser console); during development its very handy to check the variable value at particular line of code where you what to check the value.

2. debugger;

debugger is also one of the good option, its “quick and dirty” debugging tool. Put it in your code, Chrome will automatically stop there when it’s executing, its as simple as that. You can even wrap it in conditionals so it’s only run when you need it, but don’t forget to remove it from deliverable code (my personal recommendation).

3. Responsive option to check all the size 

Chrome provides resizing viewport, to use this option go to your inspector and click the ‘toggle device mode’ button. You can watch your media queries then. Its is unrealistic and not feasible to have all kind of device at your desk to test it. so you can use this tool. Here you can add your custom device height and width for test purpose.

4. Benchmark loops using console.time() and console.timeEnd()

If you want to check exactly how long something has taken to execute, especially when debugging slow loops and such. You can even set up multiple timers by providing a label to the method. 

5. Jump on DOM element quickly

Mark a DOM element in the elements panel and use it in your console. Chrome inspector keeps the last 5 elements in its history, so the last marked element will be displayed with $0, the second to last marked element $1, and so on. 

If you mark items in order ‘item-4’, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ then you can easily access the DOM nodes in the console. 

6. Function Stack trace

While using any JavaScript framework / library, it produces a lot of code. Views are created, events are triggering functions, and in the end you want to know what caused this function call - Haha. 

As we know JavaScript is not a very structured language, sometime it is hard to say what went wrong, why and when, especially when you jump into someone else’s code. For that kind of scenarios console.trace (or just trace in the console) may be a good option for debugging JavaScript. This tool can be useful even if you code very well. Okay, now I can say if you want to improve your code get the trace and your great list of all related functions. Every single one is clickable and you can now go back and forth between these functions. It’s like a menu of functions just for you. 

7. Un-minify code easy way for debugging Javascript

Don’t be panic even if your code on production and something went wrong or some issue is coming due to your JS. Chrome can un-minify your JavaScript less to a more human readable format. Obviously, the code won’t be as helpful as your real code—but at least you can actually see what’s happening. Click the {} Pretty Print button below the source viewer in the inspector. 

8. Find function quickly

If you want to set a breakpoint in a function. The two most common ways to do that, either In your inspector add breakpoint to nth line OR Add debugger in your script. In both of these solutions, you have to click around the particular line you want to debug. What’s probably less common is to use the console. Use debug(functionName) in the console and the script will stop when it reaches the function you passed in. It’s quick, but the somehow it doesn’t work on private or anonymous functions. But if that’s not the case, it’s probably the fastest way to a function to debug. (always remember: there’s a function called console.debug which is not the same thing.) 

9. Use console to access element

A faster way to do a querySelector in the console is with the dollar sign. $(‘css-selector’) will return the rest match of CSS selector. $$(‘css-selector’) will return all of them. If you are using an element more than once, it’s worth saving it as a variable. 

10. Break on node changes

Sometimes things change and you don’t quite know why. However, when you need to debug JavaScript, Chrome lets you pause when a DOM element changes. You can even monitor its attributes. In inspector, right-click on the element and pick a break on setting to use. 

11. Important points in complex debugging

For more complex debugging sometimes we want to output many lines. One thing you can do to keep a better structure of your outputs is to use more console functions like: Console.log, console.debug, console.warn, console.info, console.error, etc. You can then later them in your inspector. But, sometimes this is not really what you want when you need to debug JavaScript. It’s now that you can get creative and style your messages. Use CSS and make your own structured console messages when you want to debug JavaScript. For example: In the console.log() you can set %s for a string, %i for integers, and%c for custom style. If you use a single page framework you may want to have one style for view message and another for models, collections, controllers, etc. maybe also name the shorter like wlog, clog, and mlog. Now, It’s time to use your imagination.