In this tutorial, you will learn some handy debugging tips and tricks you can use within Chrome that will hopefully make you a better developer. 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. The developer who can fix the bug in 15 minutes is a lot more valuable. That person will likely get promoted faster and given a better pay rise. So this stuff matters!
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. For most bug fixing, trying to figure out the cause of an error is where 80% of the effort goes. After you understand the issue, fixing a bug usually becomes infinitely easier. Learning ninja-like debugging skills is essential towards becoming a rockstar developer. 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
Making random changes to fix an issue before understanding what is not working is not a good approach. This might sound obvious advice, however, everyone falls into this trap at some point during their carear. From my experience, nine out of ten times this hack until something works approach usually makes things worse, not better.
When I finished Uni in 2004, 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 fixed things. In some cases, I made things worse. In some cases, things magically fixed themselves. In all cases, the servers had custom config that made them more suspectable to failures!
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.
Capture Which Event Listeners Are Attached To An Element
One of the trickier parts of Javascript debugging is finding out exactly what Javascript code was run on the page. On a really complex page that contains lots of Javascript, figuring what code is running, what events have been triggered, and where that code lives in your codebase can be elusive. Especially, if the code is minified and transpiled for production usage! 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 with 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.
Setting Breakpoints
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. Click on the line number you want to debug, like in the example below:
When a breakpoint has been successfully added, a little blue arrow is added onto the line number, as shown above. When you reload your page, if that 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 and much better than using the classic console.log(). If breakpoints in Chrome are new to you then I suggest you get up to speed ASAP, as it will simplify your development workflow a lot.
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, find the file you want to look at:
Clicking the {} icon will re-format the minified code, making it easy to read:
This should make your life that little bit easier now 😊
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' is a useful technique to stop the trouble area within your codebase.
In Chome, within the 'Sources tab' enabled the option - as seen above - reload your page and see what happens. When an exception occurs the debugger will show you which file has issues.
Enabling Hover State
When debugging issues on pseudo-states on HTML elements, like the hover state 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
While your application is running, you can use console.log() directly in the Chrome console to see the state of a variable. 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.
With these five tips, I'm hoping your lives will be a lot less frustrating while you are debugging. Happy Coding 🤘
