一、Console API

Console.assert()

判斷第一個參數(shù)是否為真，false的話拋出異常并且在console輸出相應(yīng)信息。

Console.count()

以參數(shù)為標(biāo)識記錄調(diào)用的次數(shù)，調(diào)用時在console打印標(biāo)識以及調(diào)用次數(shù)。

Console.debug()

console.log方法的別稱，使用方法可以參考Console.log()

Console.dir()

打印一條以三角形符號開頭的語句，可以點擊三角展開查看對象的屬性。

Console.error()

打印一條錯誤信息，使用方法可以參考 string substitution。

Console._exception()

error方法的別稱，使用方法參考Console.error()

Console.group()

打印樹狀結(jié)構(gòu)，配合groupCollapsed以及groupEnd方法;

Console.groupCollapsed()

使用方法和group相同，不同的是groupCollapsed打印出來的內(nèi)容默認(rèn)是折疊的。

Console.groupEnd()

結(jié)束當(dāng)前Tree

Console.info()

打印以感嘆號字符開始的信息，使用方法和log相同

Console.log()

打印字符串，使用方法比較類似C的printf格式輸出

Console.profile()

可以以第一個參數(shù)為標(biāo)識，開始javascript執(zhí)行過程的數(shù)據(jù)收集。和chrome控制臺選項開Profiles比較類似，具體可參考chrome profiles

Console.profileEnd()

配合profile方法，作為數(shù)據(jù)收集的結(jié)束。

Console.table()

將數(shù)據(jù)打印成表格。Console.table [en-US]

Console.time()

計時器，接受一個參數(shù)作為標(biāo)識。

Console.timeEnd()

接受一個參數(shù)作為標(biāo)識，結(jié)束特定的計時器。

Console.trace()

打印stack trace.

Console.warn()

打印一個警告信息，使用方法可以參考 string substitution。

二、用法

1、Console.log

舊版兼容

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

輸出對象

var someObject = { str: "Some text", id: 5 };
console.log(someObject);
//Object {str: "Some text", id: 5}

格式化

%s 格式string
%d or %i    格式int
%f  格式float
%o  格式Object對象
%O  格式object對象
%c  格式css

輸出對象

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 上圖片出不來 

Firefox 41.0.2 下測試

不過網(wǎng)上有一個有趣的東西 console.image，chrome自帶的有擴展 https://github.com/jffry/console.image-chrome-extension

console.image(" console.image(" console.image(" console.image(" 源代碼地址：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("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of 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文檔中查看堆棧跟蹤的詳細(xì)介紹和示例.這個比較好用

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 > 10 , "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、Other Command 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 非常好用的一個工具

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 * 77 + g * 150 + b * 29) >> 8;
}
brightness();

調(diào)試的時候還可以加斷點什么的……

8、jquery相關(guān)  firequery

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

這樣就可以 easily check inside jQuery chains.

四、相關(guān)資源

Firefox
http://getfirebug.com/
(you can also now use Firefox's built in developer tools Ctrl+Shift+J (Tools > Web Developer > Error Console), but Firebug 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 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/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html
Now with iOS 6 you can view the console through Safari in OS X if you plug in your device. Or you can do so with the emulator, simply open a Safari browser window and go to the "Develop" tab. There you will find options to get the Safari inspector to communicate with your device.
Windows Phone, Android
Both of these have no console built in and no bookmarklet ability. So we use http://jsconsole.com/type :listen and it will give you a script tag to place in your HTML. From then 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 their convenient browser plugin.
Older browser problems
Lastly older browsers (thanks again Microsoft) will crash if you use console.log in your code and not have the developer tools open at the same time. Luckily its an easy fix. Simple use 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 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#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

最新評論