The console of the browser is the most important panel, the main function is to display the page loading process to generate a variety of information.
Display information
Console.log (' Hello World '); Console.debug (' Debug '); Console.info (' information '); Console.error (' Error '); Console.warn (' warning ');
The most common is the console.log .
Placeholder
consoleobjects can also use printf-style placeholders. Only character ( %s ), Integer ( %d or), %i floating-point ( %f ), Object (), %o and CSS style ( %c ) are supported.
var person == ' Jack '= $; Console.log ('%o ', person); Console.log ('%d '%d months %d days ', ', ', 'console.log (' pi:%f ', 3.1415926); Console.log ('%c changes text color ', ' color:green; ');
Information grouping
Console.group ("First set of Information"),Console.log ("first Group first"), Console.log ("first Group II");console.groupend (); Console.group ("Second set of Information");Console.log ("First of the second group"); Console.log ("second group II"); Console.groupend ();
View information about an object
console.dir()You can display all the properties and methods of an object.
var person == ' Jack '=function(str) { console.log (str);} Console.dir (person);
Display the contents of a node
console.dirxml()The Html/xml code contained in a node that is used to display a Web page.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1"> <Metaname= "Renderer"content= "WebKit"> <Metaname= "keywords"content=""> <Metaname= "description"content=""> <title>Document</title></Head><Body> <TableID= "Table"> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR> </Table></Body></HTML><Script>varotable=document.getElementById ('Table'); Console.log (otable);</Script>Judging whether it is true
console.assert()Used to determine whether an expression or variable is true. If the result is no, a corresponding message is output in the console and an exception is thrown.
Console.assert (1); Console.assert (1 = = 2);
Tracing the call path of a function
console.trace()Used to track the call path of a function.
function add (A, b) {console.trace (); return a + b;} var x = add3 (1, 1 function Add3 (A, b) { return Add2 (A, b);} function Add2 (A, b) { return Add1 (A, b);} function Add1 (A, b) { return add (a, b);}
After the run, add() the call trajectory is displayed, from top to bottom, and, add() add1() add2() add3() .
Chronograph function
console.time()And console.timeEnd() , used to display the run time of the code.
Console.time (' Timer one '); for (var i = 0; i < i++) { for (var j = 0; J < K; J + +) {}}c Onsole.timeend (' timer one ');
Performance analysis
Performance analysis (Profiler) is the analysis of the various parts of the running time, to find out the bottleneck, the use of the method is console.profile() .
Assume that there is a function Foo() that calls the other two functions, funcA() and funcB() that calls funcA() 10 times and funcB() calls 1 times.
function Foo () { for (var i = 0; i < i++) { Funca (+) ; } FUNCB (10000);} function Funca (count) { for (var i = 0; i < count; i++) {}}Function FUNCB (count) { for (var i = 0; i < count; i++) {}}
Then, you can analyze Foo() the performance of the run.
Console.profile (' Performance Analyzer One '); Foo (); Console.profileend ();
Resources
Console makes JS debugging easier