Chrome Console Console usage (after learning for debugging JS but greatly useful)

Everyone has worked on various types of browsers, each browser has its own characteristics, in my humble opinion, I used the browser, I am the most like chrome, because it for debugging scripts and front-end design debugging has it more than other places. Perhaps everyone to Console.log will have a certain understanding, in the mind will inevitably want to debug when using alert not on the line, why also use Console.log so 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

Start with a brief introduction to Chrome's console, open the Chrome browser, and press F12 to easily open the console

You can see that there is a poem in the console and other information, if you want to empty the console, you can click on the upper left corner to empty, of course, you can also enter Console.clear () in the console to clear the console information. As shown

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

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

Look at the above picture, is not aware of the strength of the log, the following we look at the console inside the specific provides what methods can be used in our normal debugging.

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

To speak with 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 the GroupEnd method can be used to enter a variety of different forms of output information.

Haha, do not feel very magical!

7, Console.assert the input expression to assert, only the expression is false, output the corresponding 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 use can not know how much more convenient than for in) directly to the DOM node in the structure of the DOM tree output, you can detail the method of object development and so on

10. Console.time Chronograph Start

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

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

See CPU-related usage information in the Profiles panel

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

14. Console.trace stack trace related debugging

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

Here are some shortcut keys for the console

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

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

The above $_ needs to be understood in order 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 审查元素 , and then in the pop-up DOM node tree above the random click, these points are the point of the nodes will be recorded, and $0 will return the most recent point selected DOM node, and so on, and so on, returned the last point selected DOM nodes, up to 5 saved, if not enough 5, is returned undefined .

3. The Chrome console natively supports jquery-like selectors, meaning you can use $ the familiar CSS selector to select DOM nodes

4. Copy copies the contents obtained from the console to the Clipboard by this command

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

5. Keys and values return the data that consists of all the property names of the incoming object, which returns an array of all property values

Speaking of which, I can't help but think of console.table method.

6. Monitor & Unmonitor

Monitor (function), which receives a function name as a parameter, for example function a , each time it a is executed, it outputs a message in the console that contains the name of the function a and the parameters passed in when it was executed.

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

Look at this picture, it should be understood, that is, in the middle of the monitor and Unmonitor code, the execution will output a message in the console, which contains the name of the function a and the parameters passed in when executing. When de-monitoring (that is, executing unmonitor), the information is no longer output in the console.

Simple comprehension is document.queryselectorall.   //is the value of the previous expression, and the console object is in # #. The command-line API is described. $0-$//Go to the value of the object, an array of return values  

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

1, rewrite Console.log change the style of output text

2. Using the console output image

3. Specify the style of the output text

Chrome Console Console usage (after learning for debugging JS but greatly useful)