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 console.log will have a certain understanding of the heart will inevitably want to debug when the use of the alert line, 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 withconsole.log
Start with a brief introduction to Chrome's console, open the Chrome browser, press f12 or Ctrl+Shift+I or you Ctrl+Shift+j can easily open the console
Now suppose a scene, 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 what would be a miserable thing if you used alert that, because the alert blocking thread is running and you don't click alert the box OK button next will alert not appear.
Let console.log 's replace it and feel the charm.
Look at the above picture, is not aware log of the strong point, the following we look at the console details of what can be provided in the use of 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 take a look at the main uses of each method.
First, the commonly used methods: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
consoleYou can use the printf-style placeholder for the above 5 methods of the 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 .
The%o placeholder, which you can use to view an object's internal condition
6. Console.dirxml used to display the Html/xml code contained in a node of a Web page
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 group and groupEnd methods to use together, you can enter a variety of different forms of output information.
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
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
Second, commonly used shortcut keys1, 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
PS: I just copied from the console of the body inside the HTML can be arbitrarily pasted to where, such as Notepad, is not feel the function is 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), it 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) that is used to stop this interception.
Look at this picture, it should be understood, that is, in monitor and the unmonitor middle of the code, when the execution of the console output a message, containing the name of the function a and the parameters passed in when executing. When de-monitoring (that unmonitor is, execution) no longer outputs information in the console.
1, rewrite Console.log change the style of output text
2. Using the console output image
3. Specify the style of the output text
4, finally say a simple operation of the chrome console, How to view the page elements , you can see that
You can see in the console simple operation once, it is not easy to think!
Transfer from http://9iphp.com/web/javascript/1303.html
Go Chrome Console Console 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
