preface

In addition to console.log, the Chrome developer Tools control panel provides debugging methods

First type: About :blank in the address bar to create a blank page, then open the console ~

Start operation demo ~ (multi picture warning! ~ ~

On the console

There is a rich API for console objects, which can be found in documentation

About Console control panel

The following sample methods only exist in the Chrome Console Console panel ~ not in JavaScripts!

The family of $

The $_

Returns the last executed value ~

Although very similar to command line!! , but $_ does not execute the expression again, as shown in the following figure:

If the previous value is not stored in the variable, you can use this method to temporarily access ~ (why temporary, because when you finish executing the next expression, $_ will be updated).

$0 – $4

The instructions $0, $1, $2, $3, and $4 correspond to the five references recently selected in the Elements panel. For example, I randomly clicked on five DOM nodes on the Nuggets site in the Elements panel. From the timeline, $4 was the first one I clicked. And $0 is my fifth and last click. Use this method to quickly debug your selected node in the Console panel!

In addition, there is something similar to regular matching ~ as shown below

function replacer(match, $1, $2, $3, $4, $5) {
  return [$1, $2, $3, $4, $5].join(The '-');
}
const str = 'abc12345#$*%[hello]{world}'
    .replace(/([^\d]*)(\d*)([^\w]*)(\[.*\])(\{.*\})/, replacer);

console.log(str); // abc - 12345 - #$*% - [hello] - {world}
Copy the code

$

Similar to document.querySelector(). Less well known, however, is its second parameter. Specifies which node to start the selection from. This is especially useful when you want to reduce your range sometimes!

The P.S. function signature $(selector, [startNode]).

?

Similar to the document. QuerySelectorAll (), same as above for reference.

P.S. function signatures? (selector, [startNode])

$x

Find nodes based on XPath expressions. The following figure shows an example:

Search for all the “a” nodes in the mining site with href, then filter through the “HTTP” or “HTTPS” nodes. You can override it, and maybe in some special case $x will be useful. Students in need can be understand to learn ~ XPath expression rules may refer to: www.w3schools.com/xml/xpath_s…

P.S. function signature $x(selector, [startNode])

API tool methods

The following methods also exist in the Chrome Console Console panel, please note

keys/values

The name shows the meaning. Functions are similar to Object.keys, object. values

monitor/unmonitor

Utility methods used to observe function calls. When a function is called, the function name and parameters can be printed synchronously.

When the function is no longer needed, call unmonitor to cancel it.

Anonymous functions, however, do not work because you cannot get the name.

monitorEvents/unmonitorEvents

Can observe the event of the image ~

You can also observe multiple events on an object at the same time

Again, use unmonitorEvents to cancel the observation. Combined with the above $family use more convenient oh

P.S. function signature: monitorEvents(Object [, events])

copy

Quickly copy an object into a string representation to clipboard ~

getEventListeners

Gets all event listeners registered to an object ~

In fact, there are built-in inspect, debug/undebug and other methods, you can search by yourself, are very useful ~ here is not an introduction ~

About breakpoint debugging

Breakpoint debugging is very important. In the past, you could just add the debugger to the code and refresh the browser debugging. In fact, there are many other breakpoints besides this method.

DOM breakpoint

In the Elements panel, right-click on the node to call up the menu and add the corresponding DOM breakpoint to monitor subtree changes, property changes, and node removal for a given node.

Source breakpoint

Sometimes you don’t need to add a Debugger to your source code. You can debug by adding breakpoints directly to the Source panel. See the small blue arrow on the line number below!

Conditional breakpoint

Conditional breakpoints. A breakpoint is triggered only when a condition is met. See the small orange arrow on the line number below!

In addition, there are blackBox, XHR(FETCH) Breakpoint and other Chrome tools, I suggest students to learn more, maybe the key can play a great role ~

tip

If you cannot find the corresponding command, you can use the shortcut Ctrl + Shift + P on the console. MacOS is Command + Shift + P. Quickly search for the control panel tools you want ~

summary

In fact, FOR a long time, I have only used console.log and simple debugger to debug Web applications. Sometimes when I encounter complex problems, the lack of various debugging methods makes it difficult to quickly locate the problems, thus reducing work efficiency. Therefore, in view of this kind of situation, learning how to debug better is believed to be a great help to the work!

Finally, students are welcome to add or correct these debugging tool methods

Of course, it would be my pleasure to help you