Chrome debugging JavaScript detailed _javascript Tips

One, Console API

Console.assert ()

Determines whether the first argument is true, False throws an exception, and outputs the appropriate information in the console.

Console.count ()

The number of times the call is identified with the parameter, and the identity is printed at the console and the number of calls.

Console.debug ()

Console.log method, use the method can refer to Console.log ()

Console.dir ()

Print a statement that starts with a triangle symbol to view the properties of the object by clicking the triangle expansion.

Console.error ()

Print an error message and use the method to refer to string substitution.

Console._exception ()

Error method of Alias, using the method reference Console.error ()

Console.group ()

Print tree structure, cooperate with groupcollapsed and GroupEnd method;

Console.groupcollapsed ()

The same method is used and the group is the same, but the content printed by groupcollapsed is collapsed by default.

Console.groupend ()

End Current Tree

Console.info ()

Print information that starts with an exclamation point character, using the same method as log

Console.log ()

Print string, using method to compare printf format output similar to C

Console.profile ()

You can start the data collection of the JavaScript execution process with the first parameter identified. and the Chrome console option open profiles is similar to the specific reference to the Chrome profiles

Console.profileend ()

Match the profile method as the end of the data collection.

Console.table ()

Print the data as a table. console.table [en-US]

Console.time ()

Timer that accepts an argument as an identifier.

Console.timeend ()

Accepts a parameter as an identifier to end a particular timer.

Console.trace ()

Print stack trace.

Console.warn ()

Print a warning message and use the method to refer to string substitution.

Second, use

1, Console.log

Old version compatible

if (!window.console) {window.console = {log:function () {}}};}

Output objects

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

Output objects

Console.log ("%o", document.body);
Console.log ("%o", document.body);

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 is ' 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 on the picture does not come out

Firefox 41.0.2 under test

But there's an interesting thing on the net Console.image,chrome 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 I. A", car, ". The object is: ", someobject);

for (var i=0; i<5; i++) {
Console.log ("Hello,%s"). You have ' 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 ("This is the outer level");
Console.group ();
Console.log ("Level 2");
Console.group ();
Console.log ("Level 3");
Console.warn ("More of the Level 3");
Console.groupend ();
Console.log ("Back to Level 2");
Console.groupend ();
Console.debug ("outer level");
Console.time ("Answer time");
Alert ("Click to continue");
Console.timeend ("Answer time");

4. Console.trace the detailed description and examples of the stack trace in the page console document. This is better.

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";
  }
}
Connecttoserver ();
var list = Document.queryselectorall ("Div.rtmarg");
Console.dirxml (List[0]);

6. Other Command line API

Inspect (document.body.firstChild);
Geteventlisteners (document);
var player1 = {  "name": "Ted",  "level": "The"
Keys (player1);
function sum (x, y) {return  x + y;}
Monitor (sum);
Monitorevents (window, "resize");

7, debugger very easy to use a 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 ();

You can also add breakpoints when debugging ...

8. jquery Related Firequery

$.fn.log = function () {
  if (window.console && console.log) {
    console.log (this);
  }
  return this;
}
$ (' foo.bar '). Find (': Baz '). log (). hide ();

This allows you to easily check inside jQuery chains.

Iv. Related Resources

Firefox
http://getfirebug.com/
(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 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 are must access the console in 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/
Now with IOS 6, can view the console through Safari in OS X if you plug in your device. Or you can do and the emulator, simply open a Safari browser windows 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 have 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 place in your HTML. From then on can view your console inside the Jsconsole website.
IOS and Android
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 (again Microsoft) would crash if you do console.log in your code and not have the developer T Ools Open at the same time. Luckily its a easy fix. The below code snippet at the top of your code and good old IE should leave:
if (!window.console) {window.console = {log:function () {}}};}
This checks to the if the console is present, and if not it sets it to a blank function Calledlog. This way Window.console and Window.console.log is never truly undefined.
Http://stackoverflow.com/questions/4539253/what-is-console-log
Https://developer.chrome.com/devtools/docs/console-api
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