Everyone has used various types of browsers, each of which has its own characteristics. In my humble opinion, among the browsers I have used, I like Chrome the most, because it is good for debugging scripts and front-end design and debugging. It is better than other browsers. Maybe you will have a certain understanding of console.log, and you will inevitably want to use alert when debugging. Why use console.log such a long string of strings instead of alert output information? Introduce some debugging tips to make you fall in love with console.log
First, let’s briefly introduce the chrome console. Open the chrome browser and press f12 to open the console easily.
You can see that there is a poem and other information in the console. If you want to clear the console, you can click the one in the upper left corner
To clear, of course, you can also clear the console information by typing console.clear() in the console. As shown below
Now suppose a scenario, if there are hundreds or thousands of elements in an array, but you want to know the specific value of each element, then think about how miserable it would be if you use alert, because the alert block The thread is running, you do not click the OK button in the alert box, the next alert will not appear.
Let's replace it with console.log and feel its charm.
Looking at the above picture, do you recognize the power of log? Let's take a look at the specific methods provided in the console for our usual debugging.
The current console methods and properties are:
**["$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]**
Let's introduce the main purpose of each method one by one.
Under normal circumstances, the methods we use to enter information are mainly the following four
1. The console.log is used to output general information
**2, console.info ** is used to output informative information
3. Console.error is used to output error information
4. Console.warn is used to output warning information
Speak with pictures
5. Console.group outputs the beginning of a group of information
6, console.groupEnd ends a group of output information
Depending on your needs, choose different output methods to use. If the above four methods are used together with the group and groupEnd methods, you can input a variety of different forms of output information.
Haha, do you think it's amazing!
7, console.assert asserts the input expression, only when the expression is false, the corresponding information is output to the console
8. console.count (this method is very practical) when you want to count the number of times the code is executed
9. console.dir (this method is what I often use, but I don’t know how much more convenient than for in.) Directly output the DOM node in the structure of the DOM tree. You can check the development of the method in detail
**10, console.time **Time start
11. The console.timeEnd timing is over (you can feel it instantly after reading the picture below)
12. Use console.profile and console.profileEnd together to view CPU usage related information
You can see cpu related usage information by viewing in the Profiles panel
13, console.timeLine and console.timeLineEnd work together to record a time axis
14, console.trace stack trace related debugging
The above method is only my personal understanding. If you want to check the specific API, you can go to the official website to see, the specific address is: https://developer.chrome.com/devtools/docs/console-api
Here are some shortcut keys of the console
1. The up and down keys of the directional keyboard are known to everyone as soon as they are used. For example, using the up key is equivalent to using the last input symbol in the console
**2, $_** command returns the result of the last expression execution, the function is the same as pressing the up arrow key and then pressing Enter
The above $_needs to understand its meaning to be used properly, and 0 4 represents the last 5 DOM nodes you have selected.
What do you mean? Right-click and select on the page 审查元素, and then click on the pop-up DOM node tree. These clicked nodes will be recorded, and the $0last clicked DOM node will be returned, and so on, $1 returns It is the last DOM node clicked last time, 5 at most are saved, if there are not 5, return undefined.
3. The jQuery-like selector is natively supported in the Chrome console , which means you can use $the familiar CSS selector to select DOM nodes
4. Copy This command can copy the content obtained in the console to the clipboard
(Haha, the html in the body just copied from the console can be pasted anywhere, such as notepad, do you think the function is very powerful)
5. The former of keys and values returns the data composed of all attribute names of the incoming object, and the latter returns an array of all attribute values
Speaking of this, I can't help but think of the console.table method
6、monitor & unmonitor
monitor(function), it receives a function name as a parameter, for example function a, every time it ais executed, it will output a message on the console, which contains the name of the function aand the parameters passed in during execution.
And unmonitor(function) is used to stop this monitoring.
Looking at this picture, you should understand, that is to say, the code between monitor and unmonitor will output a message on the console when it is executed, which contains the name of the function aand the parameters passed in during execution. When the monitoring is cancelled (that is, when unmonitor is executed), the information will no longer be output to 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 in the last 5 Elements panel, we will talk about it later.
dir // Actually console.dir
keys // Take the key name of the object, return an array of key names
values // Go to the value of the object, return an array of values
Let's take a look at some tricks of console.log
1. Rewrite console.log to change the style of output text
2. Use the console to output pictures
3. Specify the style of output text
Finally, let’s talk about a simple operation of the chrome console, how to view page elements, see the picture below.
You can find out after a simple operation on the console, don’t you think it’s easy!