Over a million developers have joined DZone.

Debug JavaScript With These 14 Tips

Raygun's Freyja Spaven and Daniel Wylie offer up various tips for debugging JavaScript. Read on for 14 pointers complete with examples.

· Web Dev Zone

Download this free eBook to learn how to build robust JavaScript applications and ensure effective error monitoring is in place, brought to you in partnership with Raygun

how to debug javascript header

JavaScript has a reputation as being not very structured, and it can be hard to get an overview of what happened and when exactly…

When it comes to getting things done, the last thing we need is to be digging around for hours…

It’s knowing your tools inside out that can make a major difference when it comes to being able to efficiently debug JavaScript.

If only it were that easy!

Whether you’re building a new mobile app or a hobby piece, time is usually pretty precious—it certainly helps to have a few extra tips in the bag when it comes to knowing how to debug JavaScript properly…

In this article, we’ve got our senior developer talking about how to debug your JavaScript.

Most of the tips are for Chrome inspector, and also some great ones for Firefox. Many of these tips will work in other inspectors as well.

If you find yourself in a bind, just refer back to this guide for a quick and easy debug.

Over to Daniel.

Let’s get started (in no particular order):

1. ‘debugger;’

After console.log, debugger is my favourite “quick and dirty” debugging tool. Chuck it in your code, Chrome will automatically stop there when it’s executing. Simple as. You can even wrap it in conditionals so it’s only run when you need it.

if (thisThing) {

2. Display Objects as a Table

Sometimes you have a complex set of objects that you want to view. You can either console.log them and scroll through the list… Or break out the console.table helper. Makes it super easy to see what you’re dealing with!

var animals = [
    { animal: 'Horse', name: 'Henry', age: 43 },
    { animal: 'Dog', name: 'Fred', age: 13 },
    { animal: 'Cat', name: 'Frodo', age: 18 }


3. Try All the Sizes

Whilst having every single mobile device on your desk would be pretty awesome, it’s not really feasible in the real world. How about resizing your viewport instead? Chrome provides you with everything you need. Jump into your inspector and click the ‘toggle device mode’ button. Watch your media queries come to life!

try all the sizes to help debug javascript

4. How to Find Your DOM Elements 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 following items in order ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ then you can access the DOM nodes like this in the console:

debug javascript and find your DOM

5. Benchmark Loops Using console.time() and console.timeEnd()

It can be super useful to know 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. Let's see how it works with the world's most useful code!


var items = [];

for(var i = 0; i < 100000; i++){
   items.push({index: i});


It produces the following result:

Image title

6. Get the Stack Trace for a Function

If you’re using a JavaScript framework, you know that it produces a lot of code—quickly.

Views are created, events are triggering functions, and in the end you want to know what caused this function call.

Since JavaScript is not a very structured language it can sometimes be hard to get an overview of what happened and when. Especially when you jump into someone else’s code. This is when console.trace (or just trace in the console) comes handy to be able to debug JavaScript.

Imagine you want to see the entire stack trace for the function call funcZ in the car instance on line 33:

var car;

var func1 = function() {

var func2 = function() {

var func3 = function() {


var func4 = function() {
car = new Car();

var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;

this.funcX = function() {

this.funcY = function() {

this.funcZ = function() {
console.trace(‘trace car’)


Know you script well using the console for a quick way to debug javascript
Console Trace

Now we can clearly see that function func1 called func2 which called func4. Func4 created an instance of Car and then called the function car.funcX and so on.

Even though you think you know your script well this can still be quite handy. Let’s say 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. Unminify Code as an Easy Way to Debug JavaScript

Sometimes you have an issue on production and your source maps don’t quite make it to the server… Fear not. Chrome can unminify your JavaScript files to a more human readable format. Obviously, the code won’t be as helpful as your real code—but at the very least, you can actually see what’s happening. Click the {} Pretty Print button below the source viewer in the inspector.

How to unminify your code to debug javascript

8. Quickly Find a Function to Debug

Let’s say you want to set a breakpoint in a function.

The two most common ways to do that are:

  • to find the line in your inspector and add a breakpoint.
  • to add a debugger in your script. In both of these solutions, you have to click around in your files to find the particular line you want to debug.

What’s probably less common is to use the console. Use debug(funcName) in the console and the script will stop when it reaches the function you passed in.

It’s quick, but the downside is it doesn’t work on private or anonymous functions. But if that’s not the case, it’s probably the fastest way to find a function to debug. (Note: there’s a function called console.debug which is not the same thing.)

var func1 = function() {

var Car = function() {
this.funcX = function() {

this.funcY = function() {

var car = new Car();

Quickly find an image to debug javascript

9.  Black Box Scripts That Are NOT Relevant

Today, we often have a few libraries and frameworks on our web apps. Most of them are well tested and relatively bug-free. But, we still debug our own scripts and the debugger still steps into all those files that have no relevance for this debugging task. The solution is to black box the script you don’t need to debug. This could also include your own scripts. Read more about black boxing in a previous article: javascript-debugging-with-black-box.

10. Find the Important Things in Complex Debugging

In more complex debugging we sometimes 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, and so on. You can then filter 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:

console.todo = function(msg) {
console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);

console.important = function(msg) {
console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);

console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);

Custom console message to debug javascript

Custom Console Message.

For example:

In the console.log() you can set %s for a string, %i for integers, and %c for custom style. You can probably find better ways to use this. If you use a single page framework you maybe want to have one style for view message and another for models, collections, controllers and so on. Maybe also name the shorter like wlog, clog, and mlog.

It’s time to use your own imagination.

11. Watch Specific Function Calls and It’s Arguments

In the Chrome console, you can keep an eye on specific functions. Every time the function is called, it will be logged with the values that was passed in.

var func1 = function(x, y, z) {

Keep your eye on specific functions when you debug javascript

This is a great way to see what arguments are passed into a function when it comes to debugging JavaScript. But I must say it would be good if the console could tell how many arguments were expected. In the above example, func1 expects 3 arguments but only 2 is passed in. If that’s not handled in the code it could lead to a possible bug.

12. Quickly Access Elements in the Console

A faster way to do a querySelector in the console is with the dollar sign. $(‘css-selector’) will return the first 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.

debug javascript and quickly access elements in the console

13. Postman Is Great (But Firefox Is Faster)

Many developers are using Postman to play around with AJAX requests. Postman is great, but I must say it’s a bit annoying to open up a new browser window, write new request objects, and then test them.

Sometimes it’s easier to use your browser.

When you do, you no longer need to worry about authentication cookies if you are sending to a password secure page. This is how you would edit and resend requests in Firefox.

Open up the inspector and go to the network tab. Right click on the desired request and choose Edit and Resend. Now you can change anything you want. Change the header and edit your parameters and the simply hit resend.

Below I present a request twice with different properties.

Edit ajax request twice - debug javascript by editing the ajax request

Edit ajax request

Having said that postman is still great and has other benefits.

14. Break on Node Change

The DOM can be a funky thing—and 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.

Break on node change to debug javascript

In Summary

These tips should provide you with a starting point when it comes time to debug JavaScript.

Extra Resource List

If you like to speed up your workflow and add to your toolbox when you need to debug JavaScript, I can also recommend you to read:

Want to make JavaScript debugging even easier with your own apps? Raygun has a free trial available and works with JavaScript. Get started today and start blasting away software errors in record time!

Related Refcard:

Download this free eBook to learn how to implement an effective ChatOps workflow to make issue management and resolution easy within software development teams, brought to you in partnership with Raygun.


Published at DZone with permission of Freyja Spaven, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}