Transfer from http://www.cnblogs.com/ctriphire/p/4116207.html
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.
The current console methods and properties are:["$$", "$x", "dir", "Dirxml", "Keys", "values", "Profile", "Profileend", "monitorevents", "unmonitorevents", "inspect", " Copy "," Clear "," geteventlisteners "," Undebug "," Monitor "," Unmonitor "," Table "," $ "," $ "," $ "," $ $ "," $4 "," $_ "]
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
To speak with a diagram
You can use the printf-style placeholder for the top 5 methods of the console object. However, there are fewer types of placeholders, only support for characters (%s), integers (%d or%i), floating-point numbers (%f), and Objects (%o) four .
console.log("%d年%d月%d日",2011,3,26);console.log("圆周率是%f",3.1415926);
The%o placeholder, which you can use to view an object's internal condition
"Yellow"; Console.log ("%o", dog); 6.Console.dirxml used to display the Html/xml code contained in a node of a Web page
<Body><TableId="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 () { Span class= "Hljs-keyword" >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 the GroupEnd method can be used to enter a variety of different forms of output information.
Haha, do not feel very magical!
9, Console.assert the input expression to assert, only the expression is false, output the corresponding 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 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
12. Console.time Chronograph start
13, Console.timeend time to end (see the following figure you instantly feel it's bad)
14 . Use Console.profile and console.profileend together to view CPU usage related information
See CPU-related usage information in the Profiles panel
15, Console.timeline and console.timelineend together record a period of time axis
16. 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
Some shortcut keys for the console1, 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 arbitrarily pasted to where, 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.
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
Finally, let's talk about a simple operation of the chrome console, how to view the page elements, and see what's going on.
You can see in the console simple operation once, it is not easy to think!
"Go" console.log usage
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
