How to Stop usingconsole.log()Switch to a browserdebugger

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

When I started out as a software developer, I did encounter a lot of difficulties. The most common problem most new developers face is debugging. At first, I thought I had found the Holy Grail when I realized THAT I could open the browser’s console and console.log() would come up with a value to find a bug. It turns out to be very inefficient.

For the sake of humor, here are some of my favorite examples:

console.log (' Total Price: ', Total)// Check whether the value has been saved

consoleThe log (" Here ")// Determine whether the program executes a function
Copy the code

I think most developers are starting to realize that this is really not the way to debug programs in practice. There has to be a better way.

Fortunately, there is a debugging tool for your browser. Specifically, I’ll look at Chrome Developer Tools below.

In this article, in Chrome Developer Tools, I’ll cover using breakpoints, stepping through code, setting up listening expressions, and focusing on location.

To continue with this tutorial, you need to use the repository code sample (online demo) THAT I created, click here (it may take a little time to load)

Step 1: Reproduce the Bug

We first perform a series of operations to keep the Bug recurring

  1. In our example, we will use a car meter, if you have not already opened the case, please click here
  2. inEntree1In the input12
  3. inEntree2In the input8
  4. inEntree3In the input10
  5. inTaxIn the input10
  6. inTipIn choosing20%
  7. Click on theCalculate Bill, the total should be 39.6, however we get a different result, showing 14105.09… !!!!!!!!!

Note: There is no need to worry about what the number is, just different from the expected number.

Step 2: Learn to use itSourcespanel

To debug in the browser, you need to get used to DevTools. Open the Browser Developer tool and press Command+Option+I for Mac and Control+Shift+I for Linux

Why not use F12 lol..

Click on the Sources panel option at the top of the panel and you should have access to three panels for debugging. File navigation, source code editor, debug panel. Before proceeding to Step 3, click familiarize yourself and have some fun.

Step 3: Set your first breakpoint

Before I show you how to set your first breakpoint, let me show you how to use console.log(). Obviously, some of the calculations were wrong when our program was executing only. You can debug the program by:

Fortunately, in our browser development tools, this is no longer necessary; instead, we can simply set a breakpoint and step through the code to find the value when viewing the browser.

Let’s talk about how to set a breakpoint. Breakpoints are things that allow your browser to find out when to pause your code to allow you a chance to debug it.

For our purposes, we will set a breakpoint at the first step of our program execution by setting the mouse event.

Expand the View for the Event Listener Breakpoints option in the debug panel. Expand Mouse again and select the Click button.

Now when you click the Calculate Bill button on the page, the debugger will pause execution at the first line of the first onClick() method, and if the debugger has it elsewhere, click the play button and the debugger will jump to it.

Step 4: Step through your code

In all debugging tools, there are two options in the navigation during code execution. The user can choose either step into or Step over to proceed to the next step of the operation function.

Step into specifies that each line of code is executed one at a time inside each function

Step over is the rule to skip the entire function that is running at work

Note: The difference between the two is that step into: when it encounters a subfunction, it enters and continues to step over: when it encounters a subfunction, it does not step into the subfunction, but stops the whole execution of the subfunction, that is, the whole execution of the subfunction as a step

Here is an example of stepping through my code, under the Scope TAB, with the first three Entree values displayed on the right

Step 5: Set a breakpoint on the first line of code

Really ~ being able to execute your code step by step is incredible, but a bit bulky and cumbersome, right? Usually, I just want to know the value of a region. Line code breakpoints are the solution to this problem.

The line breakpoint is why I stopped using console.log() and chose chrome development tools instead. Simply click on the number of lines of code for which you want to see more information to set a line breakpoint. Instead of stepping through each line of each function, run the code as usual and the program will stop at the point where you set the breakpoint.

If you encounter problems, make sure you uncheck the Click option under Mouse

As you can see, my subtotal value is displayed as 10812 as I requested, and several of my Entree values are also displayed in the Scope panel and in the hover block on the code itself.

Well emm.. I think I may have found the cause of this bug, string concatenation related?

Let’s set up some listening expressions to confirm it.

Step 6: Create listening expressions

Now that we know that our entree values don’t want to add correctly, let’s set up a listening expression for each value. A listening expression allows us to extract more information from any expression or variable in the code.

To determine what values to listen for, click the watch window at the top of the right panel, and click the + button to enter a variable name or other expression.

For this example, I’ll give my first entree and its type value watch

Wow, I think I found the problem. It looks like my first entree value was stored as a string. Maybe I had a problem getting it. Perhaps, querySelector() is the culprit. Several other values may also be affected, allowing us to further debug our code in the developer tools.

Step 7: Fix the code

Judging from the demonstration below, querySelector() must be the culprit!

So how do we fix it? We can simply cast a string to a Number using Number(getEntree1()), as shown on line 74.

To actually write the code, you need to go to the Elements panel on the left of the Sources panel. If you can’t see the JavaScript code, expand the Script TAB, there, right-click and select Edit as HTML

If you’re in a work environment, it’s easy to save your code. If you are not, you need to use Command+S or Control +S to save a local copy of the web page, which you can open to view editing changes.

Ok ~

The Demo Code: github.com/paragzaveri…

In fact, as a front-end developer, only using console.log to debug code is very low-level, although I also use it a lot. Here is a translation of the article about the debugger entry level, the browser debugger is exactly the same as the editor debugger. Try adding a break point to your development and having fun with debugging. Attach my personal blog and Github, continue to output, common progress. 🚲