The cost of switching is really not high, it is recommended to use developer tools to Debug!

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

To ensure readability, free translation rather than literal translation is used in this paper. In addition, the copyright of this article belongs to the original author, and translation is for study only.

I’ve had a few pitfalls on my way to becoming a developer, and one of the biggest challenges for beginners is debug. At first, I thought using console.log() in the console was the best way to print variables. In practice, it’s pretty inefficient. I’m not afraid to be laughed at, but here’s what I did:

Console. log(' Total Price: ', Total) // View the value of Total console.log(' Here ') // Print Here to confirm that the program is executed at this locationCopy the code

I think most developers will realize that this is not the way you should debug, there has to be a better way! Fortunately, the browser’s Debug tool works well! In this article I will introduce the Google Developer tools.

To better follow my understanding of this article, I recommend that you follow my sample code instead. Address: Click here

Step 1: Reproduce the BUG

We reproduce the bug by performing a series of operations:

  1. A buggy calculator, if you haven’t already opened it, click here;
  2. Enter 12 in Entree 1;
  3. Enter 8 in Entree 2;
  4. Enter 10 in Entree 3;
  5. Enter 10 in Tax;
  6. Tip selects 20%;
  7. Click on theCalculate Bill. The correct result should be 39.6, but the calculator says 14105.09!

Step 2: Learn to use the Source panel

You’ll need to be familiar with the developer tools, which you can open by using the shortcuts Command+Option+I (Mac) or Control+Shift+I (Linux). (Or right-click and select Check options to bring up the Developer panel)

When you click on the Source TAB at the top of the developer panel, the developer panel displays three different effects: file navigator, source editor, and Debug panel at the far right.

Step 3: Set the first breakpoint

Before we set breakpoints, let me show you what console.log() looks like:






If you use developer tools, you don’t have to write a bunch of console.log(). We can set breakpoints and step through to see the value of a variable.

A breakpoint is a marker that you add to your code that tells the browser to pause execution at this point.

We’re going to set a breakpoint at the very beginning of the program.

In the far right Debugger panel, click “Event Listener Breakpoints”, expand “Mouse”, and select “Click”.

Now if we click the Calculate Bill button, the program stops at the first function “onClick()”. If this is not done, clicking the play button always jumps to line 6 of index.

Step 4: Single step debugging

During the debugging, there are two modes: step into and Step over.

The “step into” goes inside each function currently encountered and is executed line by line; “Step over” skips the details inside the function and executes the entire function.

Here is an example of a display where, under the Scope on the right, the values of all local variables are displayed.

Step 5: Set a breakpoint on a line

Wouldn’t it be nice to be able to step through code? But it’s a little tedious to go step by step. In general, I just want to know the value of a variable at a certain location, not step by step. We can set breakpoints on a line.

Author’s note: Being able to set breakpoints on any line of code to see variable values is the main reason I stopped using console.log.

Click on the left side of the file where the number of lines is displayed to set a breakpoint.

Note: If you find that you cannot do this, please clear the click option previously selected.

As you can see, subtotal has a value of 10182 on the right, and the value of the variable is displayed next to the code.

I think I know the cause of the BUG: string concatenation?

Step 6: Add observation expressions

This is usually used to watch the value of a variable change as the program executes. Click the “Watch” option on the right to expand it. You can enter a variable name or an expression.

For demonstration purposes, look at “entree1” and “typeof entree1”.

Looking at the type of entree1, you see that it is not a number but a string. The problem then is how to get this value. Perhaps querySelector() is the key to the problem.

Step 7: Fix the code

Upon further inspection, you determine that querySelector() is the problem.

How to fix it? We can use the Number function to convert a string to a Number, such as Number(getEntree1()).

To edit the code, you need to go to the “Elements” option, which is to the left of “Sources”. If you don’t see the JavaScript code, you need to expand the script tag. Then right-click and select “Edit as HTML”.

If you create a workspace, the code will be saved directly. Otherwise, you can use Command + S (MAC) or Control + S (Linux) to save a local copy.

Now, let’s try it again and see what happens.






About Fundebug

Fundebug focuses on JavaScript, wechat applets, wechat mini games, Alipay applets, React Native, Node.js and Java real-time BUG monitoring. Since its official launch on November 11, 2016, Fundebug has handled more than 900 million error events in total, which has been recognized by many well-known users such as Google, 360, Kingsoft, and People’s Net. Welcome free trial!

Copyright statement

Fundebug



Blog.fundebug.com/2018/12/11/…

Are your users experiencing bugs?

Experience the Demo
Free to use