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
console
objects 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