一、Console API

Console.assert()

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

Console.count()

以參數(shù)為標識記錄調(diào)用的次數(shù)，調(diào)用時在console打印標識以及調(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)容默認是折疊的。

Console.groupEnd()

結(jié)束當前Tree

Console.info()

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

Console.log()

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

Console.profile()

可以以第一個參數(shù)為標識，開始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ù)作為標識。

Console.timeEnd()

接受一個參數(shù)作為標識，結(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("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");

源代碼地址：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文檔中查看堆棧跟蹤的詳細介紹和示例.這個比較好用

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

(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.

Internet Explorer

Don't forget you can use compatibility modes to debug IE7 and IE8 in IE9 or IE10

If you must access the console in IE6 for IE7 use the Firebug Lite bookmarklet

Opera

iOS

Works for all iPhones, iPod touch and iPads.

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

總結(jié)

以上是生活随笔為你收集整理的console 立即输出 调试_Javascript调试利器console的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。