First, the Console API
Console.assert ()
Determines whether the first argument is true, False throws an exception, and outputs the appropriate information on the console.
Console.count ()
The number of times to identify a record call as a parameter, to print the identity and the number of calls in the console when called.
Console.debug ()
Console.log method, using the method can refer to Console.log ()
Console.dir ()
To print a statement that begins with a triangle symbol, you can click the triangle to expand to view the object's properties.
Console.error ()
Prints an error message that can be referenced by using the string substitution.
Console._exception ()
Alternative to the error method, using the method reference Console.error ()
Console.group ()
Print tree structure, with groupcollapsed and GroupEnd method;
Console.groupcollapsed ()
Using the same method as group, the difference is that the content printed by groupcollapsed is collapsed by default.
Console.groupend ()
End Current Tree
Console.info ()
Prints information that starts with an exclamation point character, using the same method as log
Console.log ()
Printing strings, using methods to compare printf format output similar to C
Console.profile ()
You can begin the data collection of the JavaScript execution process by identifying the first parameter. Similar to the Chrome console option profiles, refer to Chrome profiles
Console.profileend ()
With the profile method, as the end of the data collection.
Console.table ()
Print the data as a table. console.table [en-US]
Console.time ()
A timer that accepts a parameter as an identity.
Console.timeend ()
Takes a parameter as an identifier to end a specific timer.
Console.trace ()
Prints the stack trace.
Console.warn ()
Print a warning message and use the method to refer to string substitution.
Second, usage
1, Console.log
Older version compatible
Output Object
var someobject = {str: "Some text", Id:5};console.log (someobject);//object {str: "Some text", Id:5}
Formatting
%s format string%d or%i format int%f format float%o Format Object object%o Format Object Object%c format CSS
Console.log ("%c", ' padding:77px 219px; Background:url (http://www.erongtu.com/application/uploads/ask/2015-10-20/ 5625a690f0ddd.jpg) no-repeat;line-height:166px;height:166px; '); Console.log ("%d", 5+5), Console.log ("%f", Math.PI), Console.log ("%s", "This was a good idea"), Console.log ("%ccss Style", " text-shadow:1px 1px 1px rgba (0,0,0,2); font-size:40px ");
Google Chrome 46.0.2490.71 m-chip doesn't come out
Firefox 41.0.2 under test
But there's an interesting thing on the Internet. Console.image,chrome comes with an extended https://github.com/jffry/console.image-chrome-extension
Console.image ("Http://i.imgur.com/hv6pwkb.png"); Console.image ("http://i.imgur.com/hv6pwkb.png"); Console.image ( "Http://i.imgur.com/hv6pwkb.png"); Console.image ("http://i.imgur.com/hv6pwkb.png");
Source code Address: Https://github.com/adriancooney/console.image
2, console.info/Console.log
var car = "Dodge Charger"; var someobject = {str: "Some text", id:5}; Console.info ("My first car was a", car, ".) The object is: ", someobject); for (Var i=0; i<5; i++) { console.log ("Hello,%s. You ' ve called me%d times. "," Bob ", i+1);} Console.log ("I want to print a number:%d", "string")
3, Console.group/console.warn/console.time/console.debug
Console.log ("The outer level"), Console.group () Console.log ("Level 2"), Console.group (); Console.log ("Level 3") ; Console.warn ("More than Level 3"), Console.groupend (); Console.log ("Back to Level 2"); Console.groupend (); Console.debug ( "Back to the outer level"), Console.time ("Answer Time"), Alert ("Click to continue"), Console.timeend ("Answer time");
4、console.trace
console
View detailed descriptions and examples of stack traces in the page document. This is good.
Foo (); function foo () { function bar () { console.trace (); } Bar ();}
5, Console.assert/console.count/console.dirxml/console.dir/console.error
var list = Document.queryselectorall (' Div.rtmarg '); Console.assert (List[0].childnodes.length >, "Oops,this is Small "); function login (user) {Console.count (" login called for user ' "+ user +" ' ");} Login ("join"), Login ("join"), Login ("join"), Login ("Chen"); Console.dir (document.body); function Connecttoserver () { var errorCode = 1;if (errorCode) {console.error ("Error:%s (%i)", "Server is not responding", 500);}} Connecttoserver (); var list = Document.queryselectorall ("Div.rtmarg"); Console.dirxml (list[0]);
6. OtherCommand line API
Inspect (document.body.firstChild); geteventlisteners (document), var player1 = { "name": "Ted", "level": 42} Keys (player1); function sum (x, y) { return x + y;} Monitor (sum); monitorevents (window, "resize");
7, debugger a very useful tool
Brightness = function () { debugger; var r = Math.floor (this.red*255), var g = Math.floor (this.green*255), var b = Math.floor (this.blue*255), return (R * + + G * (+ b *) >> 8;} Brightness ();
Debugging can also add a breakpoint what ...
8. jquery related firequery
$.fn.log = function () { if (window.console && console.log) { console.log (this); } return this;} $ (' foo.bar '). Find (': Baz '). log (). hide ();
This makes it possible to easily the check inside jQuery chains.
Iv. Related Resources
Firefox
http://getfirebug.com/
(You can also now use Firefox's built in developer Tools ctrl+shift+j (Tools > Web developer > Error Console), but F Irebug is much better; Use Firebug)
Safari and Chrome
Basically the same.
Https://developer.chrome.com/devtools/index
Https://developer.apple.com/technologies/safari/developer-tools.html
Internet Explorer
Don ' t forget you can use compatibility modes to debug IE7 and IE8 in IE9 or IE10
http://msdn.microsoft.com/en-us/library/ie/gg589507 (v=vs.85). aspx
http://msdn.microsoft.com/en-us/library/dd565628 (v=vs.85). aspx
If You must access the console on IE6 for IE7 use the Firebug Lite bookmarklet
Http://getfirebug.com/firebuglite/look for Stable Bookmarklet
Http://en.wikipedia.org/wiki/Bookmarklet
Opera
http://www.opera.com/dragonfly/
Ios
Works for all iPhones, IPod touch and IPads.
http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/appleapplications/reference/safariwebcontent/ Debuggingsafarioniphonecontent/debuggingsafarioniphonecontent.html
Now with IOS 6 You can view the console through Safari on OS X If you plug in your device. Emulator, simply open a Safari browser window and go to the "Develop" tab. There you'll find options to get the Safari inspector to communicate with your device.
Windows Phone, Android
Both of these has no console built in and no bookmarklet ability. So we use http://jsconsole.com/type:listen and it'll give you a script tag to the place in your HTML. From and on you can view your console inside the Jsconsole website.
IOS and Android
You can also use Http://html.adobe.com/edge/inspect/to Access Web Inspector tools and the console on any device using the IR convenient browser plugin.
Older browser problems
Lastly older browsers (thanks again Microsoft) would crash if you use Console.log on your code and not having the developer T Ools Open at the same time. Luckily its a easy fix. Simple with the below code snippet at the top of your code and good old IE should leave you alone:
if(!window.console){ window.console = {log: function(){} }; }
This checks to see if the console is present, and if not it sets it to an object with a blank function called log
. This, Window.console and Window.console.log is never trulyundefined.
Http://stackoverflow.com/questions/4539253/what-is-console-log
Https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object
Https://developers.google.com/chrome-developer-tools/docs/console-api
Http://getfirebug.com/wiki/index.php/Console_API
Https://developer.chrome.com/devtools/docs/console-api
https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ Console/console.html
Https://developer.mozilla.org/zh-CN/docs/Web/API/Console
Use of Console.log