You may not know that the console is powerful

Read Catalogue

• Write in front
• Google console elements panel
• See what the elements are bound to
• Style actions
• General Conditions
• Console.log
• Console.info
• Console.error
• Console.warn
• Console.debug
• Console.dirxml
• Console.group and Console.groupend
• Console.assert
• Console.count
• Console.dir
• Console.time and Console.timeend
• Console.profile and Console.profileend
• Console.timeline and Console.timelineend
• Console.trace
• The upper and lower keys of the directional keyboard
• $_
• Natively supported jquery selectors in the Chrome console
• Copy
• Keys and values
• Console.table
• Monitor & Unmonitor
• Console.log style
• If you feel this blog post to you have a harvest, think the little woman is still hard, please click on the bottom right corner of the [recommended], Thank you!

Go back to the top and write in front.

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.

1, first talk about the source location

Do you see a recommended icon on the bottom right of the page when you open the test page? Right-click the recommended icon, select the review element, open the Google console as shown in

Now we want to know where the Votepost method is. Follow me, type votepost in the console panel and enter.

Directly click on the red link, the console will be located in the sources panel, as shown in

Everyone looked at the above image after the estimated head will be dizzy, so many JS are the whole line, let people how to look ah, do not worry, according to the operation can (that is, click on the bottom left of the middle panel pretty print on the line)

Then we go back to the console panel will be surprised to find that the original link after the 1 is now 91 (in fact, the number 1 or 91 is representative of the Votepost method in the source line number) now see the Pretty Print button of the strong point

Know how to check the source of a button, then the next job is debugging, debugging the first step to do is to set breakpoints, in fact, set a breakpoint is very simple, click on the 92 can be shown, then you will find a 92 line number next to an icon, here to explain why not set breakpoints in 91, You can try it, in fact there is no way to set a breakpoint at 91, because it is the definition of the function, so it is not possible to set breakpoints here.

Once you've set the breakpoint, you'll see the breakpoints you just set in the Breakpoints box on the right.

Let us first introduce the use of the debugging Shortcut Bar (in fact, we can not use the following table shown in the shortcut keys, directly click on the top row of the upper right column button to debug, specifically with which button, put the mouse over the button will show it the corresponding prompt)

shortcut Keys	function
F8	Resume Running
F10	Step over, encountered custom function also as a statement execution, but not into the function inside
F11	Stepping in, encountering a custom function that goes inside the function
Shift + F11	Step out, jump out of the current custom function

It is worth mentioning that when we click on the "Recommended" button to debug, we will find that no matter we are pressing the F10 to debug or press F11 to step-up debugging, can not be $.ajax function inside, even if we set a breakpoint inside the function has no way to enter, here according to F8 is the real effect, Don't believe you try.

When we are debugging, the right-side scope variables shows the current scope and his parent scope, as well as the closure. You can see the current variable not only on the right side of the scope Variables (variable scope), but also move the mouse directly to any variable to see the value of the variable.

Speak with a picture (haha)

We just introduced in the HTML can see it bound the OnClick event, so we find it bound JS function, if it is bound in the jquery page load completion function, then how do we know it is bound by which JS function, If we don't know the bound JS function, let alone debug it.

Here's a look at how to view it, or just the test page for example, but this time we look at "Submit a review" to explain it,

Right-click on "Submit Comment"--audit element, we can clearly see that this button is not bound to any events. Enter the following code inside the console panel

functionlookevents (elem) { return $.data? $.data (Elem, "events", Undefined, true): $._data (Elem, "events" 
       
         );} 
        var event = lookevents ($ ("#btn_comment_submit") [0]); // Gets the bound event   
         

As shown in the following:

According to the method described above to locate the specific blog-common.js inside, find postcomment and then a layer to find the specific code, and then set the breakpoint is good.

Finally introduce a artifact, very useful debugger

If you write your own code, you want to make it stop at a certain place, just write the debugger on it, don't believe you try! Ha ha

Back to top Google console elements panel

There are two ways to open the Google console

1. Ctrl+shift+i
2. F12

As you know, the biggest function of the elements panel is to manipulate properties and modify HTML. Here I'll talk about some features that you might not be familiar with,

• Drag and drop nodes, adjust order
• Dragging nodes to the editor
• CTRL + Z undo Changes

These are the most interesting features that I think you can try.

Let's talk about some of the more complicated features.

Go back to the top to see what the elements are bound to.

• All Nodes are listed by default, including events on the parent/grandparent node of the node that the agent binds to, as it passes through the node during the bubbling or capturing phase
• Selected node only lists events bound to the current node
• Each event will have several properties corresponding to handler, Isatribute, LineNumber, Listenerbody, SourceName, type, usecapture

• Handler is a processing function, right-click can see the location of the function definition, the General JS Library binding event will be wrapped one layer, so it is difficult to find the corresponding handler
• Isatribute Indicates whether the event is bound by an HTML property (like onclick).
• Usecapture is the third parameter of AddEventListener, indicating whether the event is performed in bubbling or capturing order

Back to top style operation

Can be canceled by CTRL + Z

Back to top general conditions

The current console methods and properties are:

["$$", "$x",  "dir",  "Dirxml", " values ", " profile ", " inspect ", " copy ",  "clear",  "Geteventlisteners", " $ ", " $ ", " $ ",  "$ $",  "$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

Back to top of Console.log

Used to output general information

Back to top of Console.info

Used to output informational information

Back to top of Console.error

Used to output error messages

Back to top of Console.warn

For output warning messages

Back to top of 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 .

Formatting Symbols	features implemented
%s	Formatted as a string output
%d or%i	Formatted as a numeric output
%f	Formatted as floating point output
%o	Convert to expanded DOM element output
%O	Translate into JavaScript object output
%c	Format the string according to the style you provide

   Console.log ("%d years%d months%d days", 2011,3,26); Console.log ("Pi is%f", 3.1415926);

The%o placeholder, which you can use to view an object's internal condition

var dog = {};d og.name = "Da Mao";d og.color = "Yellow"; Console.log ("%o", dog);  

Here are some tips on console.log

1, rewrite Console.log change the style of output text

Console.log ("%c3d Text", "text-shadow:0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px RG BA (0,0,0,.1), 0 0 5px Rgba (0,0,0,.1), 0 1px 3px Rgba (0,0,0,.3), 0 3px 5px Rgba (0,0,0,.2), 0 5px 10px rgba (0,0,0,.25), 0 10px 10 PX Rgba (0,0,0,.2), 0 20px 20px Rgba (0,0,0,.15); font-size:5em ") console.log ('%crainbow Text ', ' background-image:- Webkit-gradient (linear, left top, right top, color-stop (0, #f22), Color-stop (0.15, #f2f), Color-stop (0.3, #22f), color-st OP (0.45, #2ff), Color-stop (0.6, #2f2), Color-stop (0.75, #2f2), Color-stop (0.9, #ff2), Color-stop (1, #f22)); color: transparent;-webkit-background-clip:text;font-size:5em; ');

The result of the output is as follows:

2. Using the console output image

3. Specify the style of the output text

Back to top of console.dirxml

The Html/xml code contained in a node that is used to display 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&gt ; </body><script type= "Text/javascript" >Window.onload () {Var mytable = document.getElementById ( mytable ); Console.dirxml (mytable); }</script>         

Back to the top of Console.group and Console.groupend

> Outputs the beginning and output of a set of information to 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!

Back to top of Console.assert

Asserts the input expression and outputs the appropriate information to the console only if the expression is False

Back to top of Console.count

(This method is very practical OH) when you want to count the number of times the code is executed

Back to top of 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

Back to the top of Console.time and Console.timeend

The timing starts and the timing is over (see the figure below and you'll feel it in a moment)

Back to the top of Console.profile and Console.profileend

Use together to see information about CPU Usage

See CPU-related usage information in the Profiles panel

Back to the top of Console.timeline and Console.timelineend

Record a time axis together with a

Back to top of console.trace

debugging related to Stack traces

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

Here are some shortcut keys for the console

Go back to the top of the keyboard with the upper arrow

Everyone knows when they use it. For example, the use of a key is equivalent to using the last input symbol in the console

Back to top of $_

The command returns the result of the most recent expression execution, with the same function as pressing the UP ARROW key and then 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 .

Is the value of the previous expression $0-$//Go to the value of the object, an array of return values 

Take a look at the chrome console for a simple operation, 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!

Back to top Chrome console native support class jquery selector

That means you can $ choose a DOM node with a familiar CSS selector.

Back to top copy

This command allows you to copy the contents obtained from the console to the Clipboard ( if you select a node in the elements panel, you can also press CTRL + C to perform the copy operation )

(haha just copied from the console of the body inside the HTML can be pasted anywhere, such as Notepad is not feel very powerful)

Back to top keys and values

The former returns data that consists of all the property names of the passed-in object, which returns an array of all property values

Back to top of console.table

Back to top 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.

Back to top Console.log style

Formatting Symbols	features implemented
%s	Formatted as a string output
%d or%i	Formatted as a numeric output
%f	Formatted as floating point output
%o	Convert to expanded DOM element output
%O	Translate into JavaScript object output
%c	Format the string according to the style you provide

Say the above a bunch of formulas, or give an example to impress you some, haha.

Enter the following code in the console

Console.log ("%c3d Text", "text-shadow:0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px RG BA (0,0,0,.1), 0 0 5px Rgba (0,0,0,.1), 0 1px 3px Rgba (0,0,0,.3), 0 3px 5px Rgba (0,0,0,.2), 0 5px 10px rgba (0,0,0,.25), 0 10px 10 PX Rgba (0,0,0,.2), 0 20px 20px Rgba (0,0,0,.15); font-size:5em ") console.log ('%crainbow Text ', ' background-image:- Webkit-gradient (linear, left top, right top, color-stop (0, #f22), Color-stop (0.15, #f2f), Color-stop (0.3, #22f), color-st OP (0.45, #2ff), Color-stop (0.6, #2f2), Color-stop (0.75, #2f2), Color-stop (0.9, #ff2), Color-stop (1, #f22)); color: transparent;-webkit-background-clip:text;font-size:5em; ');

The result of the output is as follows:

Back to Top

You may not know that the console is powerful