In this tutorial, you will learn some common debugging tips and tricks you can use within Chrome.  To become a good developer, you will need the ability to figure out why something isn't working efficiently.  I've worked on a team where one developer might spend days trying to fix a bug and another developer comes along, identifies the bug and fixes it within 15 minutes.

If this situation sounds familiar to you and you're ruminating that you'll never be able to master this ninja-like ability, fear not.  In most cases, it's how the individual approaches the problem rather than some natural inbred ability.

Learning ninja like debugging skills is essential towards becoming a rockstar developer.   In the majority of situations, trying to figure out the cause of an error is 80% of the hard bit.  After you have the right knowledge of the issue, fixing a bug usually becomes infinitely easier.  If you want to learn a few techniques that can make your life easier, then read on.

Where To Start Debugging?

Before I go into specific Javascript tips, let's start with the basics.  

Do not change anything, until you understand the issue

This might sound simple, but making random changes to fix an issue before understanding it will in 9/10 times make things worse, not better.  When I finished Uni, I worked as a third-level support desk engineer for a few months.

Someone would log a bug, I'd go onto a server with no clue about the issue.  I'd then start making random changes until something worked.  In some cases, I made things work.  In some, I made things worse.  In some cases, things magically fixed themselves but the servers had loads of issues.

For this reason, when you start debugging, the tips you need in your toolkit aren't coding knowledge, it's about how to find out what's broken.  Below lists the techniques I frequently use to help me identify what the cause is of Javascript bugs.

How To Figure Out What Event Listeners Are Attached To An Element

One of the most defunct bits of debugging is finding out exactly what Javascript code was run.  In really large sites with lots of Javascript events on a page, figuring out what event triggered an action, and wherein your codebase that method lives can be elusive.  One way of trying to figure out what's occurring on a page is to browse the event listeners section.

If you can inspect an element in your dev-tools and open the 'Event Listeners' tab, you'll be presented a view of all the event handlers that are associated with it.  Browsing through here can give you great insights about what Javascript is running on your page.

Set A Breakpoint

After you find some code that looks like a likely cause for a bug, you will probably want to step through your code.  In chrome, you can do this really simply by opening up your dev-tools, and within the 'Sources' tab in the 'Page' section, opening up the Javascript file you want to debug, and click on the line number you want to debug.

When a breakpoint is added, a little blue arrow is added onto the line number, as shown above.  When you reload your page, if your bit of code is run, Chrome will pause the page execution to the breakpoint.  This should give you a powerful way to figure out exactly what your code is doing.  Using breakpoints to debug is a very powerful feature, if you don't know how to do this, I suggest you get up to speed with this technique as it will make your life better.

Make Minified Code Easier To Read

When working with Javascript, especially in production environments, it's very common to work with minified files. Minified files are great in terms of improving page load times, but minified files really suck for us Javascript developers when we need to debug issues.

One way to make your life a little easier when debugging minified files is to use Chromes in-build 'pretty print' feature. In your dev-tools, if you view the network tab and find the file you want to look, as you can see below:

Clicking the {} button as shown below will re-format the minified code, making it easy to read.

Pause On Any Exception Thrown

If your page isn't loading as expected and you can't figure out why enabling 'Pause on caught exceptions' can help point you in the correct direction.  

In Chome, within the 'Sources tab' enabled the option - as seen above - reload your page and see what happens.

Enabling Hover State

This is more of a CSS tip when debugging the pseudo-states on elements in your DOM - like the hover on a link - you can enable the hover state to always turn on.

To enable this, in your dev-tools, select an element and in the top right corner, you should see a ':hov' button.  Click that and you should be presented with a selection of different states you can enable, as seen above.  To enable the hover state, enable ':hover' option.  When enabled the element will render in that state until you turn it off, or refresh the page.

Logging Information In A More Readable Format

One quick handy tip.  Instead of using console.log() to view the state of a variable, you can use console.table(). 

console.table() will output the contents of a variable in a nicely formatted table which can make it a little easier to spot errors in your data.