By Parag Zaveri | Oct 1, 2018

The original

When I started my career as a software development engineer, I found that I experienced many difficulties in the process. One of the most common challenges is one that every novice will encounter – debugging. At first, when I found that I could open the console and look at console.log() output to locate a bug, IT was like a holy land. But this approach is inefficient. Here are some of my favorite and humorous examples:

The console. The log (' Total Price: ', Total) //In an effort to see if the value was stored console.log(' Here ') // if my program execution reached a certain functionCopy the code

I think most developers are starting to realize that this is not a good way to debug your program. There’s a better way.

A good one is a browser debugger. In this article, I use chrome Developer tools.

In this article, I’ll show you how to use breakpoints, step through code, set up monitoring expressions, and apply fixes in Chrome Developer Tools.

In order to complete this tutorial, you will need to use my example code. Click here (need to climb the wall)

Step 1: Reproduce the bug

We first perform a series of bug-prone actions.

1. In this example, we use a buggy tip calculator.

2. Enter 12 in ‘Entree1’

3. Enter 8 in ‘Entree2’

4. Enter 10 in ‘Entree3’

5. Enter 10 in ‘Tax’

6. Select 20% at ‘Tip’

7, Click the button to calculate the bill, the total should be 39.6, however, we get a different answer, the result is 14105.09… Yikes!

Step 2: Learn to use resource boards

To debug in Chrome, you need to open the developer tools. To open it, press Command+Option+I (Mac) or Control+Shift+I (Linux).

Open the Resources page, as shown in the figure above. File navigation bar, source code editor, debug bar. Familiarize yourself before step 3.

Step 3: Set your breakpoint

Before using breakpoints, let me use console to debug. Obviously, debugging can be done by:

Fortunately, this is no longer necessary in browsers. Instead, we can set breakpoints to see how our code works step by step.

Let’s see how to set breakpoints, which are what the browser looks for to know when to pause your code and give you a chance to debug it.

For educational purposes, we use the Set mouse event to set a breakpoint at the beginning of the program.

In the debugger column, expand the Event Listener Breakpoints view. From there, expand the mouse. Then check the “Click” button.

Now, when you click the Calculate Bill button, the debugger will pause execution at the first line of the first function, “onClick ()”. If the debugger is anywhere else, press the play button and the debugger will skip it.

Step 4: Start debugging

In all debugging tools, there are two buttons that execute code. Developers can enter or skip functions.

Do not omit every line of code for every method.

Skip the method

This is an example of me stepping through code. Under the Range TAB, the values for the first three input boxes are displayed on the right.

Step 5: Set a breakpoint at the row number

It’s great, but there’s a problem. It’s a bit silly to set breakpoints like this, usually we just need to look at it somewhere. There is a good way to set breakpoints at the number of lines on a particular line

Author’s VOICE: This feature made me completely ditch the console method and fall in love with debugging tools.

Just click on the line number to set the line breakpoint. Then run your code and the debugger will stop where you set the breakpoint.

Tip: If you encounter problems, make sure that the click check box under the mouse is unchecked.

As you can see, my subtotal value is displayed as “10812”. My entree value is displayed in the panel and calculated as well.

Emmm… Looks like string concatenation.

So let’s look at a couple more expressions to get the flow straight.

Step 6: Create a monitor expression

Now that we know that our Entree values don’t add up properly, let’s set the monitor expression on each value.

Monitoring an expression provides more information about any given variable or expression in your code.

To define a value as Monitor, click the monitor pane at the top and click the + symbol when opened. Here, you can type variable names or other expressions.

In this example, I will set the value and type to be monitored on my first Entree value.

Aha! I think I found a bug. My first value is stored as a string! It seems to be the querySelector method. You can play around with other values. Let’s go ahead and debug and change our code in DevTools.

Step 7: Fix it

Upon further examination, the querySelector method is definitely the culprit.

So how do we solve this problem? Well, we can simply cast a string to a numeric value using, for example, Number (getEntree1 ()), as shown on line 74.

To actually edit the code, you need to go to the ‘Elements’ panel to the left of’ Sources’. If you can’t see the javascript code, you need to extend the script tag. From there, right-click the code and select “Edit to HTML.”

If you use a workspace, you can easily save the code and view it immediately. If not, you need to use the name command+ S (MAC) or control+ S (Linux) to save.

Then you can see the changes to your native code.

Little brother you kangkang ~ ~

The debugging approach in this article was inspired by Kayce Basques’ article.

Demo:github.com/paragzaveri…