Chrome Console Debug Learning notes not organized

15:03 2015/12/7
Chrome Console Debug Learning:
Recommended Blog: http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html
Console.log General information, you can print the required content or variables
can be customized in combination with%c: Console.log ('%chello world ', ' font-size:25px;color:red; ');
You can also change the output style with CSS
Can be multiple parameters, it will automatically be separated by a space output: Console.log ('%c hello ', ' color:red; ', ' Xiao Ming ', ' You know Little Red was beaten by Mom ');
Console.error Printing Error class information
Console.warn Printing Warning Class error
Console.info Print tip Information
Console.group
Xonsole.groupend (suitable for the development of a large-scale module, when the function is very complex)
Example:
Console.group ("App.foo");
Console.log ("Information from foo module blah blah blah ...");
Console.groupend ();
Console.group ("App.bar");
Console.log ("Information from the bar module blah blah blah ...");
Console.groupend ();

Implementation of the Console.assert if expression
Example:
var Isdebug=false;
Console.assert (isdebug, ' Log information in development ... ‘);
Xonsole.count used to count the number of times a piece of code was executed
Example:
function foo () {
Other function logic blah blah ...
Console.count (' foo ' executed number: ');
}
Foo (); Call the function above to see the effect
Xonsole.dir the DOM node as a JS object, and the Console.log is output directly from the structure of the DOM tree
Console.dir (document.body);
Console.log (document.body);
Console.time & Console.timeend//Doing performance testing to see how time is executing
Example:
Console.time ("Array initialize");
var array= new Array (1000000);
for (var i = array.length-1; I >= 0; i--) {
Array[i] = new Object ();
};
Console.timeend ("Array initialize");
Console.profile & Console.timelime
Console.profile & console.profileend View CPU Usage related information (tab of development tool)
Console.timelime & console.timeend Time Axis
Console.trace stack trace related debugging, code is interrupted point in the back panel to view stack-related information
These are the collectively called Console APIs that are mounted under the Window.console object.
Next is the command line API used in the console.
$_ returns the execution result of the last expression and the effect of pressing the UP ARROW key
Example:
2+2//Enter, and then
$_+1//return to 5
$0-$4 represents the last 5 DOM nodes you have chosen, saving up to 5
$ (' body ') supports Jqeury selector selection but $ (selector) returns the first DOM element that satisfies the selection criteria. Is the package of native JavaScript document.queryselector ()
$$ (selector) returns a collection of all elements that satisfy the selection criteria, which is the encapsulation of Document.queryselectorall ()
Copy copies the values obtained by the console to the Clipboard
Example:
Copy (document.body)
But here the console command can only be executed in the console environment, because he is not attached to any global variables such as window, so in fact, in the JS code is not access to the Copy method, so from the code level to invoke the copy function is not possible to talk about
Key & Values
The former returns the data that consists of all the property names of the object, which returns an array of all property values
var tboy={name: ' Wayou ', Gender: ' Unknown ', hobby: ' Opposite to the Gender '};
Keys (Tboy);
Values (Tboy);
Monitor & Unmonitor
Receives a function name, and each time the function is executed, the console outputs a message that includes function names and incoming parameters
function SayHello (name) {
Alert (' Hello, ' +name);
}
Monitor (SayHello);
SayHello (' wayou ');
Unmonitor (SayHello);
SayHello (' wayou ');
Debug & Undebug
Debug also receives a function name as a parameter.
When the function executes, it automatically breaks down for debugging, similar to a breakpoint at the entrance of the function,
It can be done through debugger, and you can also break points manually by finding the source code in the Chrome developer tool.
The undebug is to dismiss the breakpoint.
View Ajax Request Information: Click Console, click Clear Record, then refresh the request will appear the AJAX request URL, directly click on the URL to enter the page view mode, view the data, you can use the JSON Format tool to view the JSON data format
JS Direct test
CSS Real-time testing
Look at the time
http
....

Chrome Console Debug Learning notes not organized