Debugging is a very important part of project development. Mastering some debugging skills can not only help us locate problems, but also improve our development efficiency. This article introduces debugging techniques in two scenarios:

  1. Code error.
  2. Logic error.

Tips for debugging code errors

Tip 1: Read the error message

In most cases, if you can read the error message and the error stack, you know what caused the error. Error messages can be classified into the following four types:

ReferenceError

Incorrect reference type. This error is reported when referring to a variable that does not exist. Such as:

console.log(a)
Copy the code

Uncaught ReferenceError: A is not defined. Because when a is referenced, it hasn’t been defined yet.

SyntaxError

Syntax error. This error is reported when a syntax error occurs. Such as:

let c == 5
Copy the code

Uncaught SyntaxError: Unexpected token ‘==’

TypeError

Type error. This error is reported when the type of the value does not match what is expected. Such as:

let data = await fetch('/api/list')
data.list
Copy the code

If data is undefined. Uncaught TypeError: Cannot read property ‘list’ of undefined. The expectation is an object, but the reality is undefined.

Take a look at the following code:

doSth()

function doSth(cb) {
  cb()
}
Copy the code

Uncaught TypeError: CB is not a function. Expectation is a function, reality is not.

RangeError

Scope error. This error is reported when the value is set outside the corresponding range. Such as:

new Array(-1).Copy the code

Uncaught RangeError: Invalid array length.

Tip 2: Dichotomy errors

Some error message, according to the error message, can not locate the specific code. At this point, dichotomy can be used to quickly locate the specific code reporting the error. Specific practices are as follows:

For example, in React development, Uncaught vandalism: Minified React error #31; . . This is due to illegal JSX nodes. Dichotomies can quickly identify problematic JSX.

Tip 3: The technique of breaking points

The breakpoint can be on the line before the error. You can view the value of each variable in the current scope and in the parent scope. See which one causes the error on the next line.

In the figure above, the Scope Tab on the right contains information about variables in Scope, and the Call Stack is information about the Call Stack.

If an error is reported only in certain cases, a conditional breakpoint can be set. I’m used to writing conditional breakpoints in code:

if (a > 5) {
  debugger
}
Copy the code

Tips for debugging logic errors

Logic errors are often caused by incorrect condition judgments, incorrect loop exit conditions and poor control of asynchrony.

Find out how logic goes wrong:

Tip 1: Use breakpoints to find problem code

Sometimes, bad logic can cause unexpected DOM changes. Or interface call. In this case, you can set a DOM breakpoint to find the problem. DOM breakpoints support three trigger conditions:

  1. Subtree is Modified. Triggered when a child element changes.
  2. The Attribute is Modified. Triggered when a property changes.
  3. The Node Removal. Triggered when the element is deleted.

For example, to see why an element was removed incorrectly, set a DOM breakpoint and trigger the node removal condition. To set the DOM breakpoint mode, right click on the target element and click on the menu shown below:

Sometimes, bad logic leads to unexpected interface calls. In this case, you can find the problem by setting the XHR/ FETCH breakpoint. The trigger condition of the XHR/ FETCH breakpoint supports filtering interface addresses. In the Source Tab of the developer tools, you can hit the XHR/fetch breakpoint. As shown below:

Tip 2: Use assertions to find faulty functions

We write high coverage unit tests to ensure that the function logic is correct. However, due to limitations and the team’s concept, the workload of writing tests, project duration and other reasons, only a small number of people write tests.

Writing assertions in console.assert() is a low-cost alternative to testing. Output the contents of the second argument to the console only if the first argument to console.assert() is false. Console.assert () displays an error message to tell which function failed. Such as:

function sum(a, b) {
  // Code implementation
}

console.log(sum(1.2)! = =3.'sum function logic error')
Copy the code

Tip 3: Debug the style of elements that disappear by clicking on the outside

Some elements disappear when the development tool reviews them. You can debug this element with the feature that breakpoints freeze the DOM. In the console, enter the following code:

setTimeout(() = > {debugger}, 2000)
Copy the code

Then, let the element display. 2 seconds, a breakpoint will be reached, and then the element will be examined again, because DOM updates will be frozen by the breakpoint, and the element will not disappear.

Recommended reading

  • Play Chrome DevTools, front-end debugging tips: juejin.cn/post/684490…
  • 14 and JavaScript debugging: blog.fundebug.com/2017/11/08/…