一 實(shí)例圖解

四種不同的console輸出函數(shù)，輸出信息前顯示不同的圖標(biāo)；

$查看某個(gè)元素；

console.dir()可以顯示一個(gè)對(duì)象所有的屬性和方法；

分組顯示信息；

顯示digitalData對(duì)象；

console.dirxml()用來顯示網(wǎng)頁的某個(gè)節(jié)點(diǎn)（node）所包含的html/xml代碼；

斷言；

console.assert()用來判斷一個(gè)表達(dá)式或變量是否為真。如果結(jié)果為否，則在控制臺(tái)輸出一條相應(yīng)信息，并且拋出一個(gè)異常；

console.trace()跟蹤某個(gè)函數(shù)的調(diào)用情況；

二 Console命令詳解

Console命令詳解

Firebug是網(wǎng)頁開發(fā)的利器，能夠極大地提升工作效率。

控制臺(tái)（Console）是Firebug的第一個(gè)面板，也是最重要的面板，主要作用是顯示網(wǎng)頁加載過程中產(chǎn)生各類信息。


一、顯示信息的命令

Firebug內(nèi)置一個(gè)console對(duì)象，提供5種方法，用來顯示信息。
最簡(jiǎn)單的方法是console.log()，可以用來取代alert()或document.write()。比如，在網(wǎng)頁腳本中使用console.log("Hello World")，加載時(shí)控制臺(tái)就會(huì)自動(dòng)顯示如下內(nèi)容。
另外，根據(jù)信息的不同性質(zhì)，console對(duì)象還有4種顯示信息的方法，分別是一般信息console.info()、除錯(cuò)信息console.debug()、警告提示console.warn()、錯(cuò)誤提示console.error()。

比如，在網(wǎng)頁腳本中插入下面四行：
　　console.info("這是info");
　　console.debug("這是debug");
　　console.warn("這是warn");
　　console.error("這是error");

加載時(shí)，控制臺(tái)會(huì)顯示如下內(nèi)容。
可以看到，不同性質(zhì)的信息前面有不同的圖標(biāo)，并且每條信息后面都有超級(jí)鏈接，點(diǎn)擊后跳轉(zhuǎn)到網(wǎng)頁源碼的相應(yīng)行。

二、占位符

console對(duì)象的上面5種方法，都可以使用printf風(fēng)格的占位符。不過，占位符的種類比較少，只支持字符（%s）、整數(shù)（%d或%i）、浮點(diǎn)數(shù)（%f）和對(duì)象（%o）四種。
比如，
　　console.log("%d年%d月%d日",2011,3,26);
　　console.log("圓周率是%f",3.1415926);

%o占位符，可以用來查看一個(gè)對(duì)象內(nèi)部情況。比如，有這樣一個(gè)對(duì)象：
　　var dog = {} ;
　　dog.name = "大毛" ;
　　dog.color = "黃色";

然后，對(duì)它使用o%占位符。
　　console.log("%o",dog);

三、分組顯示

如果信息太多，可以分組顯示，用到的方法是console.group()和console.groupEnd()。
　　console.group("第一組信息");
　　　　console.log("第一組第一條");
　　　　console.log("第一組第二條");
　　console.groupEnd();
　　console.group("第二組信息");
　　　　console.log("第二組第一條");
　　　　console.log("第二組第二條");
　　console.groupEnd();

點(diǎn)擊組標(biāo)題，該組信息會(huì)折疊或展開。

四、console.dir()

console.dir()可以顯示一個(gè)對(duì)象所有的屬性和方法。
比如，現(xiàn)在為第二節(jié)的dog對(duì)象，添加一個(gè)bark()方法。
　　dog.bark = function(){alert("汪汪汪");};
然后，顯示該對(duì)象的內(nèi)容，
　　console.dir(dog);

五、console.dirxml()

console.dirxml()用來顯示網(wǎng)頁的某個(gè)節(jié)點(diǎn)（node）所包含的html/xml代碼。
比如，先獲取一個(gè)表格節(jié)點(diǎn)，

　　var table = document.getElementById("table1");

然后，顯示該節(jié)點(diǎn)包含的代碼。
　　console.dirxml(table);

六、console.assert()

console.assert()用來判斷一個(gè)表達(dá)式或變量是否為真。如果結(jié)果為否，則在控制臺(tái)輸出一條相應(yīng)信息，并且拋出一個(gè)異常。
比如，下面兩個(gè)判斷的結(jié)果都為否。
　　var result = 0;
　　console.assert( result );
　　var year = 2000;
　　console.assert(year == 2011 );

七、console.trace()

console.trace()用來追蹤函數(shù)的調(diào)用軌跡。

比如，有一個(gè)加法器函數(shù)。
　　function add(a,b){
　　　　return a+b;
　　}

我想知道這個(gè)函數(shù)是如何被調(diào)用的，在其中加入console.trace()方法就可以了。
　　function add(a,b){
　　　　console.trace();
　　　　return a+b;
　　}
假定這個(gè)函數(shù)的調(diào)用代碼如下：
　　var x = add3(1,1);
　　function add3(a,b){return add2(a,b);}
　　function add2(a,b){return add1(a,b);}
　　function add1(a,b){return add(a,b);}
運(yùn)行后，會(huì)顯示add()的調(diào)用軌跡，從上到下依次為add()、add1()、add2()、add3()。

八、計(jì)時(shí)功能
console.time()和console.timeEnd()，用來顯示代碼的運(yùn)行時(shí)間。
　　console.time("計(jì)時(shí)器一");
　　for(var i=0;i<1000;i++){
　　　　for(var j=0;j<1000;j++){}
　　}
　　console.timeEnd("計(jì)時(shí)器一");

九、性能分析

性能分析（Profiler）就是分析程序各個(gè)部分的運(yùn)行時(shí)間，找出瓶頸所在，使用的方法是console.profile()。
假定有一個(gè)函數(shù)Foo()，里面調(diào)用了另外兩個(gè)函數(shù)funcA()和funcB()，其中funcA()調(diào)用10次，funcB()調(diào)用1次。

　　function Foo(){
　　　　for(var i=0;i<10;i++){funcA(1000);}
　　　　funcB(10000);
　　}
　　function funcA(count){
　　　　for(var i=0;i<count;i++){}
　　}
　　function funcB(count){
　　　　for(var i=0;i<count;i++){}
　　}

然后，就可以分析Foo()的運(yùn)行性能了。

　　console.profile('性能分析器一');
　　Foo();
　　console.profileEnd();

控制臺(tái)會(huì)顯示一張性能分析表，如下圖。

標(biāo)題欄提示，一共運(yùn)行了12個(gè)函數(shù)，共耗時(shí)2.656毫秒。其中funcA()運(yùn)行10次，耗時(shí)1.391毫秒，最短運(yùn)行時(shí)間0.123毫秒，最長(zhǎng)0.284毫秒，平均0.139毫秒；funcB()運(yùn)行1次，耗時(shí)1.229ms毫秒。

除了使用console.profile()方法，firebug還提供了一個(gè)"概況"（Profiler）按鈕。第一次點(diǎn)擊該按鈕，"性能分析" 開始，你可以對(duì)網(wǎng)頁進(jìn)行某種操作（比如ajax操作），然后第二次點(diǎn)擊該按鈕，"性能分析"結(jié)束，該操作引發(fā)的所有運(yùn)算就會(huì)進(jìn)行性能分析。

十、屬性菜單
控制臺(tái)面板的名稱后面，有一個(gè)倒三角，點(diǎn)擊后會(huì)顯示屬性菜單。
默認(rèn)情況下，控制臺(tái)只顯示Javascript錯(cuò)誤。如果選中Javascript警告、CSS錯(cuò)誤、XML錯(cuò)誤都送上，則相關(guān)的提示信息都會(huì)顯示。
這里比較有用的是"顯示XMLHttpRequests"，也就是顯示ajax請(qǐng)求。選中以后，網(wǎng)頁的所有ajax請(qǐng)求，都會(huì)在控制臺(tái)面板顯示出來。
比如，點(diǎn)擊一個(gè)YUI示例，控制臺(tái)就會(huì)告訴我們，它用ajax方式發(fā)出了一個(gè)GET請(qǐng)求，http請(qǐng)求和響應(yīng)的頭信息和內(nèi)容主體，也都可以看到。

js調(diào)試系列 控制臺(tái)命令行API使用方法

先打開百度，然后按 F12 打開后，如果不是 Console 項(xiàng)的就點(diǎn)擊 Console 這項(xiàng)，因?yàn)槲覀円诳刂婆_(tái)操作。。
看到如下內(nèi)容：

好了我們先清空內(nèi)容，可以右擊選 Clear console 菜單，或者輸入 clear() 都行。
接著，我們輸入 document.getElementById('kw1'); 然后回車，就可以看到 id 為 kw1 的元素信息了。

是不是很簡(jiǎn)單。下一步是用 console.dir 查看該元素信息。
輸入 console.dir(document.getElementById('kw1')); 然后回車，出來一個(gè)奇奇怪怪的東西。

你可以點(diǎn)這個(gè)東西，然后他會(huì)展開，列出所有屬性方法。簡(jiǎn)單說就是這個(gè)元素的 dom 屬性方法。
好了，這個(gè)我就不詳細(xì)說了，反正 dir 方法也是調(diào)試?yán)髦弧?br />
這些問題其實(shí)是今天內(nèi)容的一個(gè)伏筆，剛才我們看到如何在控制臺(tái)查看一個(gè)元素以及他的屬性方法。
其實(shí)控制臺(tái)為我們提供了很多命令行api，簡(jiǎn)單點(diǎn)說就是只有控制臺(tái)能用的函數(shù)。
目前控制臺(tái)方法和屬性有：(chrome 34)

代碼如下:

["

","$x","dir","dirxml","keys","values","profile","profileEnd","monitorEvents","unmonitorEvents","inspect","copy","clear","getEventListeners","undebug","monitor","unmonitor","table","$0","$1","$2","$3","$4","$′′]我們常用的其實(shí)就是$,$,$0?$4,dir,keys,values這些，其他的有興趣或者想深入學(xué)習(xí)的，代碼如下:$//簡(jiǎn)單理解就是document.querySelector而已。 // 簡(jiǎn)單理解就是 document.querySelectorAll 而已。
$_ // 是上一個(gè)表達(dá)式的值，console對(duì)象#3.命令行API 里有說明。
$0-$4 // 是最近5個(gè)Elements面板選中的DOM元素，待會(huì)會(huì)講。
dir // 其實(shí)就是 console.dir
keys // 取對(duì)象的鍵名, 返回鍵名組成的數(shù)組
values // 去對(duì)象的值, 返回值組成的數(shù)組
好了，從解釋上來說確實(shí)不難理解，但是沒操作過，誰也不知道會(huì)發(fā)生什么。

該死的百度，竟然加載了 jQuery 1.10.2，
我們換soso來講解好了。。打開 http://www.soso.com/ 然后打開控制臺(tái)。
現(xiàn)在我們通過 $ 來查看 id 為 query 的元素(和百度的 kw1 元素一樣都是搜索框)，然后查看該元素的屬性方法。?

和剛才一樣的功能，但是現(xiàn)在的代碼已經(jīng)非常精簡(jiǎn)了，用到了 $, dir, $_ 這個(gè)三個(gè)控制臺(tái)屬性和方法，是不是瞬間讓調(diào)試變的簡(jiǎn)單了？
可能有人會(huì)說，現(xiàn)在一般用的都是jQuery，要查看這個(gè)怎么辦？
回到百度，我們來做剛才的那個(gè)操作。

和剛才的有一點(diǎn)點(diǎn)不一樣，因?yàn)?$('#kw1') 這一步得到的是 jQuery 對(duì)象，所以我們dir出來的也是jQuery屬性方法。
如果要看真實(shí)元素的屬性方法，加一個(gè)[0]即可

當(dāng)然如果你就是要看 jQuery對(duì)象，那就完全沒問題了。。調(diào)試嘛，當(dāng)然要一邊調(diào)，一邊試?yán)病！?
其實(shí)還有一個(gè)非常簡(jiǎn)單的方法，就是點(diǎn)擊左上角那個(gè)放大鏡圖標(biāo)，然后選擇那個(gè)輸入框。

這樣我們可以直接用 $0 進(jìn)行查看，剛才已經(jīng)介紹了 $0-$4 了，就是這個(gè)功能，簡(jiǎn)單吧。
我們來簡(jiǎn)單說下 keys 和 values 吧，這個(gè)之后也會(huì)用到。。但是有些人還是喜歡直接dir查看。

代碼如下:

var obj = {name: '尼瑪', age:22, desc: '屌絲一個(gè)'};

最后說個(gè)小技巧，就是之前輸入過的命令，不必重新輸入，可以通過方向鍵 ↑ 和 ↓ 進(jìn)行上下查找，這個(gè)功能和 cmd 類似

一??什么是 Console

Console 是用于顯示 JS和 DOM 對(duì)象信息的單獨(dú)窗口。并且向 JS 中注入1個(gè) console 對(duì)象，使用該對(duì)象 可以輸出信息到 Console 窗口中。

?

二??什么瀏覽器支持 Console

很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console。而其他瀏覽器都支 持不好。比如 IE8 自帶的開發(fā)工具雖然支持 Console，但功能比較單調(diào)，顯示對(duì)象的時(shí)候都是顯示 [Object,Object]，而且不能點(diǎn)擊查看對(duì)象里面的屬性。IE6、IE7 雖然可以安裝 Developer Toolbar，但也 不支持 console。Safari、Opera 都支持 Console，但使用上都沒有 FireBug和 Chrome 的方便。 現(xiàn)在firebug推出了 firebuglite工具，可以讓所有瀏覽器都支持Console功能，而且使用上和FireBug 幾乎一樣。詳見?http://getfirebug.com/firebuglite

?

三??為什么不直接使用 alert 或自己寫的 log

使用 alert 不是一樣可以顯示信息，調(diào)試程序嗎？alert 彈出窗口會(huì)中斷程序， 如果要在循環(huán)中顯示信息，手點(diǎn)擊關(guān)閉窗口都累死。而且 alert 顯示對(duì)象永遠(yuǎn)顯示為[object ]。 自己寫的 log 雖然可以顯示一些 object 信息，但很多功能支持都沒有 console 好，看完后面 console 的介紹就知道了。

---

（部分比較雞肋的方法沒有列出來，用粗藍(lán)標(biāo)出來的是常用的方法）

?

四??Console.log(object[, object, ...])

Console.log 是最簡(jiǎn)單輸出信息到 console 窗口的方法，支持多個(gè)參數(shù)，該方法會(huì)把 這些參數(shù)組合在一起顯示，e.g：

log?方法第一個(gè)參數(shù)支持類似 C 語言 printf 字符串替換模式，Log 支持下面幾種替換模式：

?

• %s??代替字符串
• %d??代替整數(shù)
• %f??代替浮點(diǎn)值
• %o??代替 Object

e.g:

?

五??console.debug，info，warn，error

這 4 種方法與 log 方法使用一模一樣，只是顯示的圖標(biāo)和文字顏色不一樣.

?

六??console.assert(expression[, object, ...])

assert 方法類似于單元測(cè)試中的斷言，當(dāng) expression 表達(dá)式為 false 的時(shí)候，輸出后面的信息,e.g： 注：assert 方法在 firebuglite 不支持，Chrome 和 FireBug 支持

?

七??console.clear()

該方法清空 console 中的所有信息 (Chrome中不支持)

?

八??console.dirxml(node)

把 html 元素的html 代碼打印出來,等同于log.

?

九??console.trace()

trace 方法可以查看當(dāng)前函數(shù)的調(diào)用堆棧信息，即當(dāng)前函數(shù)是如何調(diào)用的，e.g:

?

十??console.group(object[, object, ...]), groupCollapsed, groupEnd

這 3 個(gè)函數(shù)用于把 log 等輸出的信息進(jìn)行分組，方便閱讀查看。

groupCollapsed 方法與 group 方法一樣，只是顯示的分組默認(rèn)是折疊的.

?

十一??console.time(name)/console.timeEnd(name)

我們經(jīng)常需要測(cè)試 js 函數(shù)的執(zhí)行時(shí)間，可能我們自己寫代碼在第1 條語句和 最后 1 條語句取當(dāng)前時(shí)間相減。這組函數(shù)其實(shí)就實(shí)現(xiàn)了這樣的功能，time(name)根據(jù) name 創(chuàng)建 1 個(gè)新 的計(jì)時(shí)器。timeEnd(name)停止給定name 的計(jì)時(shí)器，并顯示時(shí)間。

?

十二??console.profile(name)/console.profileEnd()

這組方法用于打開瀏覽器的分析器，用于分析這組函數(shù)之間的 js 執(zhí)行情況， 注：firebuglite 不支持 profile 功能，Chrome 支持 profile，但分析的內(nèi)容不詳。

?

十三??console.count([title])

count 方法用于統(tǒng)計(jì)當(dāng)前代碼被執(zhí)行過多少次，title 參數(shù)可以在次數(shù)前面輸出額外的標(biāo)題以幫助閱讀。e.g:

?

十四??console.table(data)

table 方法把data 對(duì)象用表格的方式顯示出來，這在顯示數(shù)組或者格式一樣的JSON 對(duì)象的時(shí)候非常有用。

注：table 只支持 FireBug，而且是在 firebug1.6+版本后才有。

?

總結(jié)：?Console 是幫助我們學(xué)習(xí)和調(diào)試 JS的 1 個(gè)非常好工具，如果你以前沒用過，哪現(xiàn)在就開始用它吧。

你會(huì)發(fā)現(xiàn)它能幫你省很多開發(fā)時(shí)間的。

總結(jié)

以上是生活随笔為你收集整理的js调试控制台使用详解图解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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