We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to apply for this job!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Engineers who find a new job through JavaScript Works average a 15% increase in salary 🚀

Blog hero image

How to stop using console.log() and start using your browser’s debugger

Parag Zaveri 14 November, 2018 | 5 min read

When I started my journey to become a software developer, I definitely ran into my fair share of bumps in the road. One of the most common struggles that most new developers face is debugging. At first, I thought I discovered the holy grail when I realized that I could open the console in chrome and console.log() out my values to discover where my bugs were. This turned out to be highly inefficient. For the sake of humor, here are a couple of my favorite use cases:

console.log(‘Total Price:’, total) //In an effort to see if the value was stored

console.log(‘Here’) //If my program execution reached a certain function

I think most developers begin to realize that this is NOT how you are actually supposed to debug your programs. There has to be a better way!

Well thankfully there is, your browser’s debugging tools. Specifically, I will discuss the Chrome Developer Tools.

In this post, I will cover using breakpoints, stepping through your code, setting watch expressions, and applying your fixes in Chrome Developer Tools.

In order to follow along with this tutorial, you will need to use a sample repository of code that I created. Click here. (May Take A Minute To Load)

Step 1: Reproduce The Bug

We start by executing a series of actions that consistently reproduce the bug.

  1. In our case we will be using a buggy tip calculator. If you haven’t opened the sample code. Please do so here.
  2. Enter 12 for ‘Entree 1’
  3. Enter 8 for ‘Entree 2’
  4. Enter 10 for ‘Entree 3’
  5. Enter 10 for ‘Tax’
  6. Choose 20% for ‘Tip’
  7. Click Calculate Bill. The total should be 39.6, however we get a much different result. Instead, it appears we have 14105.09…yikes!

blog1.png

Step 2: Learn To Use Sources Panel

In order to debug this in Chrome, you need to get used to using DevTools. To open Chrome Developer Tools, press Command+Option+I (Mac) or Control+Shift+I (Linux).

blog2.png

After clicking on the sources panel at the top, you should have access to three panels for debugging. The file navigator, the source code editor, and the debugging pane. Click around and have some fun before moving on to step 3.

Step 3: Setting Your First Breakpoint

Before showing you how to set your first breakpoint, let me first demonstrate what I mean by the use of console.log(). Clearly, in our program’s execution, something is going on with the calculation of the subtotal. One may debug the program by doing something like this:

blog3.png

Luckily, this is no longer necessary with the dev tools in your browser. Instead we can simply set a breakpoint and step through our code to find the values as the browser sees it.

Let’s talk about how to set a breakpoint. A breakpoint is something that your browser looks for in order to know when to pause execution of your code and allow you the opportunity to debug it.

For our purposes, we will be setting a breakpoint at the very beginning of the execution of the program by setting a mouse event.

On the debugger pane expand the view of the “Event Listener Breakpoints”. From there, expand “Mouse”. Then checkmark the ‘click’ button.

Now when you click the Calculate Bill button, the debugger will pause execution on the first line of the first function onClick(). If the debugger is anywhere else, push the play button and the debugger will skip over to it.

Step 4: Stepping Through Your Code

In all debugging tools, the user has two options with navigation through the execution of the code. The user can either “step into” or “step over” the next function call.

Step into will allow for each line of code to executed one by one inside of each function.

blog4.png

Step over will allow for skipping over entire functions that are known to be working.

blog5.png

Here is an example of me stepping through my code. Under the scope tab, my values for the first three entrees are display on the right.

blog7.png

Step 5: Set A Line-of-Code Breakpoint

Wow! Being able to step through your code is amazing, but kinda bulky and cumbersome right? Normally, I only want to know the values at certain locations. Well the solution for that problem, is the line-of-code breakpoint.

Authors Note: The line-of-code breakpoint was THE reason why I’ve stopped using console.log() in favor of Chrome Developer Tools

In order to set a line-of-code breakpoint, simply click on the line number that you would like to see more information about. Then run your code as usual and execution will stop on your set line-of-code breakpoint as opposed to needing to step through or over every function.

Note: If you are having trouble, make sure you’ve de-selected the click checkbox under mouse.

blog8.png

As you can see, my subtotal value is shown as I requested to a value of “10812”. My entree values are also displaying in the scope pane and as an overlay on the code itself.

Hmm…I think I may have figured out the bug. String concatenation anyone?

Let’s set some watch expressions to make sure though.

Step 6: Create Watch Expressions

Well now that we know that our entree values are not adding together properly, let’s set a watch expression on each of those values.

A watch expression will give more information on any given variable or expression in your code.

To define values to ‘watch’, click on the watch pane at the very top and click the + symbol once it opens. Here, you can type in variable names or other expressions.

For the demo, I will be setting a watch on my first entree value and the type of that entree value.

blog9.png

Aha! I think I’ve found the problem. It appears that my first entree is stored as a string! It seems to be coming from how I acquire the value itself. Perhaps, querySelector() is the culprit. Several other values may be effected as well. Let’s debug further then move into fixing our code in DevTools.

Step 7: Fix Your Code

Upon further review, querySelector() is definitely the culprit!

blogxx.png

So how do we fix this? Well we can simply coerce the strings into number values using, for example, Number(getEntree1()) as in line 74.

In order to actually edit the code, you will need to go the ‘elements’ panel left of ‘sources’. If you cannot see the javascript code, then you need to expand on the script tag. From there, right click on the code and select ‘edit as html’.

blog11.png

If you are using a workspace, saving the code will be easy and viewable instantly. If not, you will need to save a local copy of the webpage using command+s (mac) or control+s (linux).

From there you can open your local copy and view the changes.

blog12.png

Originally published on medium.com

Author's avatar
Parag Zaveri
Software Developer

Related Jobs

Related Issues

xapix-io / devops
xapix-io / devops
  • Open
  • 0
  • 0
  • Intermediate
  • HCL
xapix-io / devops
  • Open
  • 0
  • 0
  • Intermediate
  • HCL
xapix-io / devops
  • Open
  • 0
  • 0
  • Intermediate
  • HCL
xapix-io / devops
  • Open
  • 0
  • 0
  • Intermediate
  • HCL
xapix-io / devops
  • Open
  • 0
  • 0
  • Intermediate
  • HCL
xapix-io / axel-f
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
xapix-io / axel-f
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
WorksHub / client
  • 1
  • 1
  • Intermediate
  • Clojure
  • $50
WorksHub / client
  • 1
  • 0
  • Intermediate
  • Clojure

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GithubStart with Stack OverflowStart with Email