Chrome Console Debugging Tool usage

Let's take a look at what the console has to offer for debugging purposes.

Console API
When opening Firebug (which also includes a browser's own debugging tools such as Chrome), Windows registers an object called console, which provides a variety of ways to output information to the console for debugging use by developers. Here is a brief introduction to these methods, which can be used in a timely manner to improve development efficiency.

Console.log (object[, Object, ...])
Use one of the most frequently used statements: output a message to the console. Support for C-language printf formatted output. Of course, you can do the same thing without using formatted output:

var animal= ' frog ', count=10;
Console.log ("The%s jumped over%d tall buildings", animal, count);
Console.log ("The", Animal, "jumped over", count, "tall buildings");
Console.debug (object[, Object, ...])
Outputs a message to the console that includes a hyperlink to the location of the line's code.

Console.info (object[, Object, ...])
Outputs a message to the console that contains an icon that represents "information", and a hyperlink to the location of the line code.

Console.warn (object[, Object, ...])
Same info. The difference is that the icon differs from the style.

Console.error (object[, Object, ...])
Same info. The difference is that the icon differs from the style. The error actually produces the same effect as the throw new error (), which throws a JS exception to the browser when using the statement.

Console.assert (expression[, Object, ...])
Assertion, tests whether an expression is true, throws an exception if it is not true (assertion fails).

Console.dir (object)
Outputs all the properties of an object (the output is similar to the style in the DOM panel).

Console.dirxml (node)
To output a tree of HTML or XML elements, click on the nodes above the tree to enter the HTML panel.

Console.trace ()
The stack trace at the time of the output Javascript execution.

Console.group (object[, Object, ...])
A nested block is opened at the same time as the output message to indent the contents of the output. Call Console.groupend () to end the output of this block.

Console.groupcollapsed ()
With Console.group (); The difference is that nested blocks are closed by default.

Console.time (name)
Timer, when calling Console.timeend (name), and passing the same name as the parameter, the timing stops, and the output consumes time (in milliseconds) between executing the code between the two statements.

Console.profile ([title])
Used in conjunction with Profileend () for performance testing, exactly the same as the Profile button on the console panel.

Console.count ([title])
Output the number of times the line code is executed, and the title of the parameter will be used as the prefix for the output when it is output.

Console.clear ()
Emptying the console

Command line
The console's output panel to the right, is the console Input Panel (the Chrome debugging tool corresponds to below), here in addition to running regular JavaScript code, but also built up a considerable number of command lines can assist our debugging work, here are some common command line simple introduction.

$ (ID)
Returns an element of a given ID.

$$ (selector)
Returns a set of elements to which the given CSS selector matches.

$x (XPath)
Returns a set of elements to which the given XPath expression matches.

$
The element that is selected in the HTML panel.

$
The element that was last selected in the HTML panel.

$n (Index)
Access to the last 5 selected elements, the range of index: 0–4.

Dir (object)
Same as Console.dir (object).

Dirxml (node)
With Console.dirxml (node).

Clear ()
With Console.clear ().

Inspect (object[, tabname]) ()
View an object in the appropriate (or a specified) tab.

Keys (object)
Returns the key for all properties of an object.

Values (object)
Returns the value of all properties of an object.

Debug (FN)
Add a breakpoint in the first line of the function and use Undebug (FN) to remove the breakpoint.

Monitor (FN)
Turn on the call log for a function and use Unmonitor (FN) to turn off the function. A very useful command, but it does not seem to work well.

Monitorevents (object[, types])
The log record at which an event (or all events) of an element is turned on when it is triggered. The use cases are as follows:

Monitorevents ($0,[' click ')
Once the above command line is executed, the Click event Monitoring of the currently selected element in the HTML panel is opened, and once the click event of the element is triggered, the event object will be output at the console. If you do not specify a second parameter, all events are logged.

Profile ([title])
Same Console.profile ([title])

var II, obj = {
Name: ' Yin Xin ',
Sex: ' Male ',
Age: ' 23 '
};
For (ii in JSON) {
Console.log (i+ ': ' +obj[i]);
Alert (i+ ': ' +obj[i]);
}

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:

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

To speak in a diagram:

6, 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.

7, Console.assert the input expression to assert, only the expression is false, output the corresponding information to the console.

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

9, 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.

10, Console.time time to start. Console.timeend time is over (look at the picture below and you'll feel it in a moment)

11. Keys and values return the data that consists of all the property names of the incoming object, which returns an array of all the property values.

12.Console.table method

13. The Chrome console natively supports jquery-like selectors, meaning you can use $ the familiar CSS selector to select the DOM section.

14 . Use Console.profile and console.profileend together to view CPU usage related letters.

Chrome Console Debugging Tool usage