preface

As a front-end developer, debugging is very important to us, not too concerned about debugging method before, really is a console log walk the feeling of the world, recently some debugging methods gradually aware of the importance of the debugging and convenience for research and development work, so take some time to study and summarize the common debugging technique.

A, the Console

The Console object provides an interface for debugging the browser Console. Not only provides log, info, error and other familiar interfaces, but also provides time, timeEnd, clear and other up to 24 rich interfaces.

2. Browser console

The $_

$_ : Returns the last value executed.

$0 - $4

The instructions $0, $1, $2, $3, and $4 correspond to the five EL references recently selected in the Elements panel. &0 represents the last click of EL, and so on. Use this method to quickly debug your selected node in the Console panel.

$

Similar to document.querySelector(), selects the specified node.

$has a second argument that specifies which node to start the selection from; It’s useful to limit your choices to a certain range.

$$

Similar to the document. QuerySelectorAll (), using method with $.

copy

You can use this command to copy the content obtained on the console to the clipboard.

keys/values

These two methods are similar to Object.keys and object. values

Keys returns an array of all the keys of an object.

Values returns an array of all the values of an object.

monitor & unmonitor

Monitor (FN) takes a function name as an argument to listen on the execution of the function FN. Note that anonymous functions cannot listen.

If you do not need to listen to the FN, use unmonitor(fn) to cancel the listening.

Breakpoint debugging

Sources panel

In order of buttons:

  • Resume: Resume button (the first button), continue, shortcut key F8. Continue execution. If there are no other breakpoints, the program continues and the debugger no longer controls the program.
  • Step over: Runs the next instruction, but does not enter a function. F10.
  • Step into: shortcut key F11. Similar to “Step” but different in the case of asynchronous function calls, the Step enters the code and waits for the asynchronous function to execute.
  • Step out: Continue to the end of the current function with the Shift+F11 shortcut key. Continue executing the code and stop on the last line of the current function. This comes in handy when we accidentally enter a nested call, but we are not interested in the function, and we want to continue executing as long as possible.
  • Next Step: Run the next statement, F9. Click this button again and again, and all statements of the script are executed one by one. The next command ignores the asynchronous behavior.
  • Enable/disable all breakpoints: This button does not affect program execution. Just a batch operation breakpoint on/off.
  • Enable/disable Automatic suspension of script execution when errors occur: When this feature is enabled and developer tools are enabled, errors in any script will cause script execution to be automatically paused. And then we can analyze the variables and see what went wrong. So if our script dies because of an error, we can open the debugger, enable this option and reload the page to see what caused it to die and what the context was.

  • Watch— Displays the current value of any expression.You can click on the plus sign+Then enter an expression. The debugger displays its value at any time and automatically recalculates the expression during execution.
  • Call Stack— Displays nested call chains.
  • Scope— Displays the current variable.

Local shows the variables in the current function, and you can see their values highlighted in the source code.

Global Displays Global variables

The debugger command

const searchList = () => {

  // eslint-disable-next-line no-debugger

  debugger

  state.form.page = 1

  getList()

}
Copy the code

breakpoint

Add breakpoints directly to the Source panel for debugging.

Conditional breakpoint

Add a condition to a breakpoint. A breakpoint is triggered only if the condition is met.

The color of the conditional breakpoint is orange.

logpoint

Log breakpoint, when the code executes to this point, it prints your expression in the console, it doesn’t pause the code. Log broken pink.

Other debugging methods

SSR

Disable JS execution when you want to debug SSR rendering styles on a page.

Open the Source panel, then CMD + P, type >disable javascript, press Enter, and refresh the page. Your page is pure SSR.