Home > Developer > JavaScript
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
5, Console.debug for output debugging information
Talk in a diagram
The top 5 methods of the console object can use printf-style placeholders. However, there are fewer types of placeholders, only four of characters (%s), integers (%d or%i), floating point numbers (%f), and Objects (%O) are supported .
console.log("%d年%d月%d日",2011,3,26);console.log("圆周率是%f",3.1415926);
A%o placeholder that you can use to view an object's internal situation
"Yellow"; Console.log ("%o", dog); 6. Console.dirxml used to display Html/xml code contained in a node of a Web page
<body>
<table id= "MyTable" >
<tr>
<td>A</td>
<td>a</td >
<td>A</td>
</tr>
<tr>
<td>bbb</td>
<td>aaa </td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>333</td>
<td>222</td>
</tr>
</table>
</body>
<script type= "Text/javascript" >
window.onload = function () {
var mytable = document.getElementById (' mytable ');
Console.dirxml (mytable);
}
</script>
7, Console.group output The beginning of a set of information
8, 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!
9, Console.assert The input of the expression to assert that only the expression is false to output the appropriate information to the console
10, Console.count(This method is very practical OH) when you want to count the number of times the code is executed
11, 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
12, Console.time time to start
13, Console.timeend time to end (see the following figure you instantly feel it's powerful)
14, 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
15, Console.timeline and Console.timelineend together to record a period of time axis
16, 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
Some shortcut keys 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 $_ needs to be understood to be used properly, and $0~$4 represents the last 5 DOM nodes you have chosen.
What do you mean? Right-click on the page to select, 审查元素 and then randomly click on the Bouncing Dom node tree. The nodes that have been ordered are recorded, $0 returning the last-selected DOM node, and so on, which is the last point selected on the DOM nodes, saving up to 5, if not 5, is returned undefined .
3. The native support class jquery selector in the Chrome console , which means you can use $ 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, for example function a , each time it a is executed, it outputs a message in the console containing the name of the function a 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 name of the function and the execution of the a 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.dirkeys//object's key name, which returns the array values of the key names//objects, and returns the array of the values.
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 are in the console simple operation once to know, is not feel very simple!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
