A Beginner's Guide to Debugging With Google Chrome Dev Tools

Learning about Dev Tools for techies is more like a need to stay a cut above. With the advent of advance technology, chasing behind new trends, learning and more importantly implementing those trends has now become an inevitable task. And since we don’t have much time, I would like to get straight to the point, i.e. how to debug with chrome dev tools. Also, you will learn how to fix bugs faster.

I personally love to develop and debug JavaScript by using Chrome Dev Tools. According to me, dev tools are quite easy to use, well documented and to top it all, you will find a constant shower of new and experimental features coming out. Whether you wish to pause code execution or inspect variables or even perform mobile first web development task, using chrome development tools is the best decision to take into account.

What is Chrome Debugger

In DevTools, you will find a chrome debugger that offers you a variety of functions especially the ones designed to find errors, inspect them, collect information about exceptions and set breakpoints. By combining all these, you can surely come up with an efficient JavaScript debugger.

Technically speaking, all these debugging-oriented actions are performed in a source panel. I would rather suggest you to get into the nitty-gritty of principles and features of the source panel. Some tricks I like in source panel include:

• Enabling auto-pretty print- Here you can make sure that all the code you find here is automatically pretty-printed. (Phew, one less thing to worry about!)
• Inject console logs in pod- Have you ever considered using conditional breakpoints? In simple words, these breakpoints only pause execution if a condition evaluates to true. With the help of breakpoints, I can easily inject console.logs in production code especially when I am unable to modify the source code.
• Freeze UI to inspect elements- It’s quite hard to inspect an element that appears only on hover. Now when it comes to freezing UI to inspect elements, all you require doing is open the source panel, display the tooltip, use the keyboard shortcut especially when you wish to pause script execution. As soon as the script execution will be paused, you simply require going back to the Elements panel and inspect the tooltip as you are used to.

From this point on, I will use DevTools to mean Chrome DevTools for brevity. Now there are a couple of things one must consider before debugging with DevTools.

#1 Canary build- Staying long on the bleeding edge of chrome and devtools is not so easy. In prior it is always advisable to check out the canary build of Chrome and even make it your default dev browser. Now for those who don’t have any idea regarding what canary build in chrome exactly means is a developer build that gets frequent updates for early adopters. However, there are times when it may have broken build but most of the time it’s completely okay as long as you get to dabble with the latest and greatest of Chrome and devtools.

#2 Developer tools — Next in line is the step where you get to experiment on all the developer tools. So what needs to be done is go to chrome: //flags and making sure Developer Tools experiments flag is turned on. As soon as you enable it, you can go to your settings and click on the experiments tab. If some of the features that I show here are not available in your devtools, you probably need to enable that feature in this experiments tab.

#3 Use Super experimental features- Scroll through all the available features, and in case, you don’t find any feature in particular. You simply require to check WIP features that might be hidden away in the devtools. While on the experiments tab, hit the shift key 6 times to show the WIP experiments on devtools.

The big Question: how to debug with the Chrome DevTools?

#1 Create a simple To-do List App- Before you even start debugging it is very important to know that you need something to debug. Now here we will be creating a simple To-do list app. For that:

1. The title of the task (required)
2. The due date of the task (optional)
3. A description of the task (optional)

This is how the HTML page will look like.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Todo List</title>
  </head>
  <body>
    <div>
      <div>
        Title: <br>
        <input type="text" id="title" />
      </div>
      <div>
        Date: <br>
        <input type="date" id="date" />
      </div>
      <div>
        Description: <br>
        <textarea id="description"></textarea>
      </div>
      <button id="addButton" onclick="addTodoElement()">Submit</button>
    </div>
    <span><h1>TODO List:</h1></span>
    <div id="content"></div>
    
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

While as for the browser, things seem like this:

As simple as that! Did you find any complications? Certainly not! Just make sure your HTML file comprises of five key elements such as:

1. A textbox for our users to write the title of their task.
2. Date input for our users to put the due date of their task.
3. A text area for the user to put in a description of their task.
4. A submit button to add the user’s task. We added an onclick event handler that will call our JavaScript function addTodoElement() which you can see below
5. A content container div that stores all the tasks that we add in our app

#2 Debug JavaScript in the Sources Tab- Before solving a bug it becomes very crucial to know what exactly causes the bug, try investigate the code causing the bug and figure out where the problem is appearing. In the afore stated example, finding the cause becomes quite easy as we only have one function- so isn’t it obvious where our offending code will be.

To search through our code while it’s running, we need to set breakpoints in our code. With the breakpoints in place, any time the site uses that line of code, the Chrome DevTools will pause execution of the code and allow us to start debugging.

1. Open the Chrome DevTools by hitting F12
2. Change to the Sources tab next to the Console

#3 Creating Breakpoints- It’s time to set breakpoint. And trust me this one is easy, remember the way you do with any other IDE.

1. Click on the line number on the left side to create a breakpoint.
2. Clear your inputs for this next example.
3. Click on the Submit button in our webpage and to hit our breakpoint

#4 Use console- By now, I am pretty sure you must have spent loads and loads of time in debugging the code. Time to stop and pull up the console.

1. Right-click anywhere in your script to open the menu
2. Click Evaluation in console

As soon as you type values in the console, you will find your bugs. Moreover, the console can also run functions alongside with printing variables.

#5 Applying the Fix- And you are almost done! Time for applying the fix to the script.

With that, our web app works like we expect it to! Great work!

Biography: Charles Richard possesses over 10 years of experience in the business analysis profession. He also enjoys mentoring BA professionals, and his well-rounded knowledge base in engineering concepts provides an easy way to make non-technical people understand basic theories. Currently, he works at TatvaSoft UK a leading PHP web development company based in London. To know more about his company, please visit https://www.tatvasoft.co.uk/