Home > Developer > JavaScript
Javascript code debugging console. log usage graphic explanation, javascriptconsole
All of you have used various types of browsers, each of which has its own characteristics. I personally see that among the browsers I have used, I like Chrome most, because it has a better experience than other browsers in debugging scripts and front-end design debugging. You may have logged on to the console. log has a certain understanding, and it is inevitable that you will want to use alert for debugging. Why should you use the console. log is such a long string to replace alert output information. Below I will introduce some Debugging techniques to make you fall in love with the console. log
First, let's briefly introduce the chrome console. Open the chrome browser and press f12 to easily open the console.
You can see that there is another poem in the console. If you want to clear the console, you can click the one in the upper left corner to clear it. Of course, you can also enter the console on the console. clear () to clear the console information. As shown in
Now let's assume that in a scenario, if an array contains hundreds of thousands of elements, but you want to know the specific values of each element, it would be miserable if you use alert, because alert blocks the thread running, you do not click the OK button in the alert box and the next alert will not appear.
Next we will use console. log to replace and feel its charm.
After reading the figure above, do you realize the power of log? Let's take a look at the specific methods provided in the console for our normal debugging.
Currently, the console methods and attributes include:
["$", "$ X", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents ", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table ", "$0", "$1", "$2", "$3", "$4", "$ _"]
Next we will introduce the main usage of each method one by one.
Generally, the following four methods are used to input information:
1. console. logUsed to output common information
2. console.infoUsed to output prompt information
3. console. errorUsed to output error messages
4. console. warnUsed to output alert information
5. console. debugUsed to output debugging information
Use graphs to speak
Any of the above five methods of the console object can use a printf-style placeholder. However, there are few placeholders,Only characters (% s), integers (% d or % I), floating point numbers (% f), and objects (% o) are supported..
Console. log ("% d", 2011,3, 26); console. log ("the circumference rate is % f", 3.1415926 );% O placeholder, which can be used to view internal conditions of an object
Var dog = {}; dog. name = "Da Mao"; dog. color = "yellow"; console. log ("% o", dog );
6. console. dirxml is used to display the html/xml Code contained by a node on a webpage.
<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. groupOutput the beginning of a set of information
8. console. groupEndEnd a set of output information
Depending on your needs, select different output methods. If the above four methods are used together with the group and groupEnd methods, you can enter a variety of different forms of output information.
Haha, do you think it's amazing!
9. console. assertAsserted the input expression. The corresponding information is output to the console only when the expression is false.
10. console. count(This method is very practical.) When you want to count the number of times the code is executed
11. console. dir(This method is often used, but I don't know how much easier it is than for in.) I directly output the DOM node in the DOM tree structure, and I can look up the method development of the object in detail .)
12. console. timeStart Time
13. console. timeEndTiming is over (after reading the figure below, you instantly feel it's amazing)
14. console. profileAndConsole. profileEndUsed Together to view CPU usage information
View the cpu usage information in the Profiles panel.
15. console. timeLineAndConsole. timeLineEndRecord a timeline together
16. console. traceStack tracing-related debugging
I personally understand the above methods. If you want to view the specific API, you can go to the official look, specific address: https://developer.chrome.com/devtools/docs/console-api
Console shortcut keys
1. Up and down keys to the keyboardAs soon as you use it. For example, using the upper key is equivalent to using the last input symbol in the console.
2. $ _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$_You need to understand its meaning to use it properly, and $0 ~ $4 indicates the last five DOM nodes you have selected.
What does it mean? Right-click on the page and selectReview ElementsAnd then click on the pop-up DOM node tree. These vertices will be recorded, and$0The latest DOM node is returned, and so on. $1 returns the DOM Node Selected last time. Up to five DOM nodes are saved. If not five DOM nodes are returned.undefined.
3. native support for jQuery selector in Chrome ConsoleIn other words, you can use$Add a familiar css selector to select a DOM Node
4. copyYou can use this command to copy the content obtained on the console to the clipboard.
(Haha, where can I paste the html in the body copied from the console, such as notepad? Do you think it is very powerful)
5. keys and valuesThe former returns data composed of all attribute names of the input object, and the latter returns an array composed of all attribute values.
Speaking of this, I can't help but rememberConsole. tableMethod
6. monitor & unmonitor
Monitor (function), which receives a function name as a parameter, suchfunction a, Each timeaIf executed, a message will be output on the console, which contains the function name.aAnd the parameters passed in during execution.
The unmonitor (function) is used to stop this listener.
After reading this figure, we should understand that the code between monitor and unmonitor will output a message in the console during execution, which contains the name of the function.aAnd the parameters passed in during execution. When unmonitor is executed, information is no longer output on the console.
$ // Simply put, it is document. querySelector. $ // Simply refer to document. querySelectorAll. $ _ // The value of the previous expression $0-$4 // It is the DOM element selected in the last five Elements panels. Dir // is actually the console. dirkeys // get the key name of the object, the returned key name array values // de-object value, returned value Array
The following describes some tips for console. log.
1. Rewrite console. log to change the output text style.
2. Use the console to output images
3. Specify the output text style
Finally, let's take a look at a simple operation on the chrome console. You can see how to view page elements.
After you perform a simple operation on the console, do you think it is very easy!
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
