Javascript Debugging & Troubleshooting – A Really Simple Guide

Welcome to a tutorial on simple debugging and troubleshooting in Javascript. Oh no! An error occurred, what is to be done next? Sadly, the immediate reaction of some beginners is to go into denial – Debugging is difficult, I will just report “it doesn’t work” to a senior developer. Well, no.

The most basic form of debugging and troubleshooting is to find out what went wrong first.

  • In most modern browsers, just press F12 to open the developer’s tools.
  • Click on an element, submit a form, or refresh the page – See the error message that is being thrown in the console.

Believe it or not, that is what most code ninjas do, and it solves a lot of silly mistakes. Wrong variable names, the wrong path, missing operators, and whatever else. This also gives a better error report than the vague “it’s not working, I don’t know what went wrong”. So if you are ready to learn more simple debugging powers – Read on!

 

 

REAL QUICK SLIDEDS

 

TABLE OF CONTENTS

Simple Debugging More Debug Tools Performance Tracking
Useful Bits & Links The End

 

 

REALLY SIMPLE DEBUGGING

All right, let us walk through a really simple and basic debugging process in this first section.

 

STEP 1) OPEN DEVELOPER’S TOOLS

One does not simply debug blindly without tools. As with the introduction above, we can fire up the built-in developer’s tools by pressing F12 in most modern web browsers. It might be a little confusing at first, but let us do a quick crash course on the commonly used tabs:

  • Elements – This is where we can inspect the HTML elements. How they are rendered, and which CSS rules are applied to them. Yes, we can even manually change the colors and styles here, just to see how it will look without actually messing with the CSS file.
  • Console – Probably one of the most important places. This is where we can find all the error messages, and even use it to keep a log of our own stuff… More on that in later sections.
  • Sources – Keeps track of all the files that are being loaded/included. I.E. CSS, Javascript, images, videos, etc…
  • Network & Performance – Gives you a waterfall diagram of when each file is being loaded and how low. Good for speed ninjas who want fast loading websites.

 

STEP 2) READ THE CONSOLE ERROR MESSAGE

So… Just how do we use the console for debugging? Well, actually just pretty much keeping it open. For example, let us say that we make a silly typo mistake on calling an onclick function.

<script>
function foo () { alert("bar!"); }
</script>

<!-- TAKE NOTE: TYPO ERROR IN ONCLICK FUNCTION -->
<input type="button" value="test" onclick="fooz()"/>

So when we click on that button, an error will be registered in the console.

Yep, it’s that simple. Notice how the console even gives you the exact file and line where the error occurred? Congratulations code ninja! You no longer have to work in the dark and wonder why clicking on a button, or why a certain piece of code doesn’t work anymore.

 

 

MORE DEBUGGING TOOLS

Before you get too happy with your new-found bugs zapping powers, hold on, and there are a few more things that you need to know.

 

CONSOLE LOG

Getting the error messages is cool, but debugging is more than that. Let’s say that we have a simple add function that is giving us some very funky results… Just how do we know if the calculations are correct? Introducing console.log(), where we can output text and variables into the console.

<script>
function add () {
  var first = document.getElementById("first").value;
  console.log("FIRST NUMBER - " + first);
 
  var second = document.getElementById("second").value;
  console.log("SECOND NUMBER - " + second);
 
  var total = first + second;
  console.log("TOTAL - " + total);
 
  return total;
}
</script>
 
<input type="number" id="first" value="1"/>
<input type="number" id="second" value="2"/>
<input type="button" value="Add" onclick="add()"/>

The above script will produce this when we click on the button:

 

TYPE OF

So… Is Javascript crazy? Shouldn’t it be 1 + 2 = 3? The developers high on something? Well, no. Let us introduce one more goodie called typeof:

function add () {
  var first = document.getElementById("first").value;
  console.log(typeof(first));
 
  var second = document.getElementById("second").value;
  console.log(typeof(second));
 
  var total = first + second;
  console.log(typeof(total));
 
  return total;
}

Hooray, problem solved, and the developers are not high. Javascript is reading the numbers as strings, so it got concatenated to 12 instead. Hint: Use parseInt() in your future projects for values obtained from input boxes.

 

 

CONSOLE TABLE

var data = {
  foo : "Bar",
  hello : "World",
  doge : "Good Boy",
  cate : "Evil",
  numbers : [1, 2, 3, 4]
};
 
console.log(data);
console.table(data);

console.log() is a cool one to use, but it can sometimes be very difficult to read the values for arrays and objects. So in this case, we use console.table() instead.

 

DEBUGGER

var first = "Hello World";
debugger;
 
var second = "Foo Bar";
debugger;
 
var third = "Doge Moon";

Need to know what is happening in your script at a certain point? Use debugger to pause the script, and the developer tools will give you a breakdown of what is happening at that point. Hit on the “resume” button to continue running the script.

 

STACK TRACE

What happens after we click on a button? Which events are fired, which functions are called, and in what sequence? Introducing the stack trace, console.trace():

<script>
function first () {
  alert(1 + second());
}
 
function second () {
  return 2 + third();
}
 
function third () {
  console.trace();
  return 3;
}
</script>
<input type="button" value="Add" onclick="first()"/>

For you guys who are confused about how to read this stack –

  • The first line is the current function, which is third().
  • The second line is the one calling the current function, which is second().
  • Guess you catch the drift – first() is the one who called second()
  • Finally, it all originated from a mouse click.

 

 

PERFORMANCE TRACKING

The above sections should be good enough for you to smash most bugs. But wait, there’s even more… This is a different kind of “debugging”, and that is to figure out what is causing your website to load or run slowly.

 

THE LOAD TIMING & SEQUENCE

Just what the heck is causing your website to load slowly? That is quite an easy question to answer, now that you have the tools. Open up the “Network” tab in the developer’s tools, and fully reload the page (usually by pressing CTRL-F5).

Yep, that will give you a waterfall chart or loading sequence of the scripts. We can pretty much sort it by the file size or loading time, and see which is the culprit choking up the loading… Then do something about it – Either defer loading a non-critical script, or compress an image further.

 

SCRIPT EXECUTION TIME

So the website is loading pretty fast, but the script is slow? Or wondering how your script will perform? Simply use console.time() to start a timer, and console.timeEnd() to log the total time taken.

console.time("testing");
var xxx = 123;
xxx += 456;
xxx -= 88;
xxx *= 2;
console.timeEnd("testing");

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

How to Debug Javascript (Click to Enlarge)

 

SUMMARY

Function Description
console.log() Output a message and/or variable to the developer’s console.
console.table() Output an array or object in (human-friendly) table form.
console.trace() Do a stack trace, what called this function?
typeof() Gives you the data type of a variable.
debugger() Pauses the script at this point, give an overview of the status.
console.time(NAME) and console.timeEnd(NAME) Starts timing the script.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you to smash some nasty bugs, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *