Details of the Chrome console console

Details of the Chrome console console

Let's take a look at how to open the browser console before you go into detail.

To open Google Developer tools, there are three ways

1. Ctrl+shift+i
2. F12
3. In the Web page, right click on "Review Element", you will open the browser developer tool

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. Enter the text you need to note, when you click on the line is not directly run, in the console wrap with SHIFT + ENTER this key combination

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

function lookevents (elem) {    true): $._data (Elem, "events" );} // 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

Google console elements panel

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.

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

Style actions

Can be canceled by CTRL + Z

General Conditions

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

Console.log: For output general information Console.info: for output informational console.error: For output error message Console.warn: For output warning information console.debug: for output debug 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 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

And about console.log , has already been playing bad. It all comes down to the API provided by Chrome: The first parameter can contain some formatting instructions such as %c .

For example, to hello world make a beautiful wedding dress and then pull out to see people:

Console.log ('%chello world ', ' font-size:25px;color:red; ');

If you don't feel good enough, apply the most gorgeous CSS styles you can write, such as gradients. So you can get the following gorgeous effect:

            Color-stop (0.15, #f2f), Color-stop (0.3, #22f), Color-stop (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; ');

2. Using the console output image

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></body>< Script type= "Text/javascript" >    function () {        var mytable = document.getElementById ( ' MyTable ');        Console.dirxml (mytable);    } </script>   

Console.group and Console.groupend: > Outputs a set of information at the beginning and output end of 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.

Console.assert: Asserts the input expression and outputs the appropriate information to the console only if the expression is False

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

Console.dir: (This method is I often use can not know how much more convenient than for in) directly the DOM node in the structure of the DOM tree output, you can detail the method of object development and so on

Console.time and Console.timeend: The timing starts and the timing ends (look at the figure below and you instantly feel it's awesome)

Console.profile and Console.profileend: Use together to see information about CPU Usage

See CPU-related usage information in the Profiles panel

Console.timeline and Console.timelineend: Record a time axis together with Console.trace

stack trace related debugging can be used console.trace . This can also be done through the UI interface. When the code is interrupted, you can Call Stack view the relevant stack information in the panel.

Described above are hanging in the window.console object below the method, collectively known as the console API, the next method is exactly called the command, is chrome built-in provided, used in the console, they are collectively called command line API.

$

It seems that the American DAO is always favored by programmers and various programming languages. "You see PHP code to know how much phper love Money," in the chrome console, the $ utility is quite a lot and convenient.
$_The command returns the result of the most recent expression execution, with the same function as pressing the UP ARROW key again, but it can be used as a variable in your next expression:

$_+1// Enter, and then// return 5   

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 .

What's more, the Chrome console natively supports jquery-like selectors, which means you can use $ the familiar CSS selector to select the DOM node and how familiar it is.

$ (selector) returns the first DOM element that satisfies the selection criteria.
Stripping off her hypocritical cloak is in fact $(selector) a native JavaScript document.querySelector() wrapper.
At the same time, another command $$(selector) returns a collection of all elements that satisfy the selection criteria, which is the encapsulation of the pair document.querySelectorAll() .

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)

Keys and values

This is a pair of friends. The former returns data that consists of all the property names of the passed-in object, which returns an array of all property values. For details, see the following example:

var tboy={name: ' Wayou ', Gender: ' Unknown ', hobby: ' Opposite to the gender '};keys (tboy); values (Tboy) ;

Console.table

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.

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:

This is indeed a very full introduction to the console of the Google Chrome control console. Inside added a little operation of their own ... Very useful

Excerpt from: HTTP://WWW.CNBLOGS.COM/LIYUNHUA/P/4529079.HTML#_LABEL10

Http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html

Details of the Chrome console console