Front-End development tool Chrome console console some usage

Everyone has used various types of browsers, each browser has its own characteristics, I humble opinion, in my browser, I am the most like chrome, because it for debugging scripts and front-end design and debugging have it than other browsers more than the place. Perhaps you will have a certain understanding of console.log, the mind will inevitably want to debug when the use of alert does not go, why also use console.log such a long string of strings to replace the alert output information, I will introduce some debugging tips, let you fall in love with Console.log

First a brief introduction to the Chrome console, open the Chrome browser, press F12 can easily open the console

You can see that there is a poem in the console there are other information, if you want to clear the console, you can click on the top left to empty, of course, you can also enter the console console.clear () to achieve the emptying of the console information. As shown in the following figure

Now suppose a scene, if there are hundreds of elements in an array, but you want to know the exact value of each element, then think about what a terrible thing it would be if you used alert, because alert blocks the thread from running and you don't click the OK button on the alert box and the next alert doesn't appear.

Below we use Console.log to replace, feel its charm.

Looking at this picture above, is not aware of the power of log, the following we look at the console to provide specific ways to use when we normally debug.

The current console methods and properties are:

["$$", "$x", "dir", "Dirxml", "Keys", "values", "Profile", "Profileend", "monitorevents", "unmonitorevents", "inspect", " Copy "," Clear "," geteventlisteners "," Undebug "," Monitor "," Unmonitor "," Table "," $ "," $ "," $ "," $ "," $ "," $_ "]

Let's take a look at the main uses of each method.

In general, the method we use to enter information is mainly used in the following four

1, Console.log for the output of general information

2, Console.info for the output of informational information

3, Console.error for output error message

4, Console.warn for output warning information

Talk in a diagram

5, Console.group output The beginning of a set of information

6, Console.groupend end a set of output information

See you need to choose a different output method to use, if the above four methods together with the group and GroupEnd method to use the same, you can enter a variety of different forms of output information.

Haha, is not that very magical ah.

7, Console.assert The input of the expression to assert that only the expression is false to output the appropriate information to the console

8, Console.count(This method is very practical OH) when you want to count the number of times the code is executed

9, Console.dir (This method is I often used can not know how much easier than for in) directly to the DOM node in the structure of the DOM tree output, you can look at the method of the object development and so on

10, Console.time time to start

11, Console.timeend time to end (see the following figure you instantly feel it's powerful)

12, Console.profile and console.profileend work together to view CPU usage related information

You can see the CPU-related usage information by looking in the Profiles panel

13, Console.timeline and Console.timelineend together to record a period of time axis

14, Console.trace stack tracking related debugging

The above method is only my personal understanding. If you want to see the specific API, you can look at the official, the specific address is: HTTPS://DEVELOPER.CHROME.COM/DEVTOOLS/DOCS/CONSOLE-API

Here are some shortcuts for the console

1, the direction of the keyboard keys , we know one use. For example, the use of the previous key is equivalent to using the last input symbol in the console

2 . The $_ command returns the result of the most recent expression execution, and the function is the same as pressing the UP ARROW key and then carriage return.

The above $_ need to understand the mystery to be used properly, while 0 4 represents the last 5 DOM nodes you have chosen.

What do you mean. Right-click on the page to select the review element, and then randomly click on the Bouncing Dom node tree. The nodes that were ordered are recorded, and the $ $ returns the last-selected DOM node, and so on, returns the last-selected DOM nodes, with a maximum of 5 saved, or 5 if not enough, Returns the undefined.

3, Chrome console native support class jquery selector , that is, you can use the $ plus the familiar CSS selector to select the DOM node

4, copy through this command can be obtained in the console copy to the Clipboard

(haha just copied from the console of the body inside the HTML can be pasted anywhere, such as Notepad is not think the function is very powerful)

5, keys and values The former returns the data that consists of all the property names of the incoming object, which returns an array of all the property values

Speaking of which, I can't help thinking of the console.table method.

6, monitor & Unmonitor

Monitor (function), which receives a function name as an argument, such as function A, each time a is executed, it outputs a message in the console containing the name a of the function and the parameters passed in when it is executed.

and Unmonitor (function) is used to stop this listening.

Look at this picture, it should be understood, that is, in the middle of the monitor and Unmonitor code, execution will be in the console output a message, which contains the function name A and the execution of the parameters passed in. When the monitor (that is, the execution of Unmonitor) is released, the information is no longer being exported from the console.

$//Simple understanding is document.queryselector.
$$//Simple understanding is document.queryselectorall.
$_//is the value of the previous expression
$0-$4//Is the DOM element selected by the last 5 elements panels, which will be spoken later.
dir//is actually the Console.dir keys
//Fetch object's key name, returns the key name composition the array values
//goes to the object's value, returns the value the composition the array

Let's take a look at some of Console.log's tips

1, rewrite the console.log to change the style of output text

2, the use of the console output picture

3, specify the style of output text

Finally, a simple operation of the chrome console, how to view the page elements, look at the picture will know

You'll know when you're on the console, it's easy to see.