Use of Console.log

Source: Internet
Author: User
Tags script tag stack trace

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 consoleView 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.