js调试控制台使用详解图解
一 實例圖解
四種不同的console輸出函數，輸出信息前顯示不同的圖標；
$查看某個元素；
console.dir()可以顯示一個對象所有的屬性和方法；
分組顯示信息；
顯示digitalData對象；
console.dirxml()用來顯示網頁的某個節點（node）所包含的html/xml代碼；
斷言；
console.assert()用來判斷一個表達式或變量是否為真。如果結果為否，則在控制臺輸出一條相應信息，并且拋出一個異常；
console.trace()跟蹤某個函數的調用情況；
二 Console命令詳解
Console命令詳解
Firebug是網頁開發的利器，能夠極大地提升工作效率。
控制臺（Console）是Firebug的第一個面板，也是最重要的面板，主要作用是顯示網頁加載過程中產生各類信息。
一、顯示信息的命令
Firebug內置一個console對象，提供5種方法，用來顯示信息。
最簡單的方法是console.log()，可以用來取代alert()或document.write()。比如，在網頁腳本中使用console.log("Hello World")，加載時控制臺就會自動顯示如下內容。
另外，根據信息的不同性質，console對象還有4種顯示信息的方法，分別是一般信息console.info()、除錯信息console.debug()、警告提示console.warn()、錯誤提示console.error()。
比如，在網頁腳本中插入下面四行：
console.info("這是info");
console.debug("這是debug");
console.warn("這是warn");
console.error("這是error");
加載時，控制臺會顯示如下內容。
可以看到，不同性質的信息前面有不同的圖標，并且每條信息后面都有超級鏈接，點擊后跳轉到網頁源碼的相應行。
二、占位符
console對象的上面5種方法，都可以使用printf風格的占位符。不過，占位符的種類比較少，只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種。
比如，
console.log("%d年%d月%d日",2011,3,26);
console.log("圓周率是%f",3.1415926);
%o占位符，可以用來查看一個對象內部情況。比如，有這樣一個對象：
var dog = {} ;
dog.name = "大毛" ;
dog.color = "黃色";
然后，對它使用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();
點擊組標題，該組信息會折疊或展開。
四、console.dir()
console.dir()可以顯示一個對象所有的屬性和方法。
比如，現在為第二節的dog對象，添加一個bark()方法。
dog.bark = function(){alert("汪汪汪");};
然后，顯示該對象的內容，
console.dir(dog);
五、console.dirxml()
console.dirxml()用來顯示網頁的某個節點（node）所包含的html/xml代碼。
比如，先獲取一個表格節點，
var table = document.getElementById("table1");
然后，顯示該節點包含的代碼。
console.dirxml(table);
六、console.assert()
console.assert()用來判斷一個表達式或變量是否為真。如果結果為否，則在控制臺輸出一條相應信息，并且拋出一個異常。
比如，下面兩個判斷的結果都為否。
var result = 0;
console.assert( result );
var year = 2000;
console.assert(year == 2011 );
七、console.trace()
console.trace()用來追蹤函數的調用軌跡。
比如，有一個加法器函數。
function add(a,b){
return a+b;
}
我想知道這個函數是如何被調用的，在其中加入console.trace()方法就可以了。
function add(a,b){
console.trace();
return a+b;
}
假定這個函數的調用代碼如下：
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);}
運行后，會顯示add()的調用軌跡，從上到下依次為add()、add1()、add2()、add3()。
八、計時功能
console.time()和console.timeEnd()，用來顯示代碼的運行時間。
console.time("計時器一");
for(var i=0;i<1000;i++){
for(var j=0;j<1000;j++){}
}
console.timeEnd("計時器一");
九、性能分析
性能分析（Profiler）就是分析程序各個部分的運行時間，找出瓶頸所在，使用的方法是console.profile()。
假定有一個函數Foo()，里面調用了另外兩個函數funcA()和funcB()，其中funcA()調用10次，funcB()調用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()的運行性能了。
console.profile('性能分析器一');
Foo();
console.profileEnd();
控制臺會顯示一張性能分析表，如下圖。
標題欄提示，一共運行了12個函數，共耗時2.656毫秒。其中funcA()運行10次，耗時1.391毫秒，最短運行時間0.123毫秒，最長0.284毫秒，平均0.139毫秒；funcB()運行1次，耗時1.229ms毫秒。
除了使用console.profile()方法，firebug還提供了一個"概況"（Profiler）按鈕。第一次點擊該按鈕，"性能分析" 開始，你可以對網頁進行某種操作（比如ajax操作），然后第二次點擊該按鈕，"性能分析"結束，該操作引發的所有運算就會進行性能分析。
十、屬性菜單
控制臺面板的名稱后面，有一個倒三角，點擊后會顯示屬性菜單。
默認情況下，控制臺只顯示Javascript錯誤。如果選中Javascript警告、CSS錯誤、XML錯誤都送上，則相關的提示信息都會顯示。
這里比較有用的是"顯示XMLHttpRequests"，也就是顯示ajax請求。選中以后，網頁的所有ajax請求，都會在控制臺面板顯示出來。
比如，點擊一個YUI示例，控制臺就會告訴我們，它用ajax方式發出了一個GET請求，http請求和響應的頭信息和內容主體，也都可以看到。
js調試系列 控制臺命令行API使用方法
先打開百度，然后按 F12 打開后，如果不是 Console 項的就點擊 Console 這項，因為我們要在控制臺操作。。
看到如下內容：
好了我們先清空內容，可以右擊選 Clear console 菜單，或者輸入 clear() 都行。
接著，我們輸入 document.getElementById('kw1'); 然后回車，就可以看到 id 為 kw1 的元素信息了。
是不是很簡單。下一步是用 console.dir 查看該元素信息。
輸入 console.dir(document.getElementById('kw1')); 然后回車，出來一個奇奇怪怪的東西。
你可以點這個東西，然后他會展開，列出所有屬性方法。簡單說就是這個元素的 dom 屬性方法。
好了，這個我就不詳細說了，反正 dir 方法也是調試利器之一。
這些問題其實是今天內容的一個伏筆，剛才我們看到如何在控制臺查看一個元素以及他的屬性方法。
其實控制臺為我們提供了很多命令行api，簡單點說就是只有控制臺能用的函數。
目前控制臺方法和屬性有：(chrome 34)
代碼如下:
["
$_ // 是上一個表達式的值，console對象#3.命令行API 里有說明。
$0-$4 // 是最近5個Elements面板選中的DOM元素，待會會講。
dir // 其實就是 console.dir
keys // 取對象的鍵名, 返回鍵名組成的數組
values // 去對象的值, 返回值組成的數組
好了，從解釋上來說確實不難理解，但是沒操作過，誰也不知道會發生什么。
該死的百度，竟然加載了 jQuery 1.10.2，
我們換soso來講解好了。。打開 http://www.soso.com/ 然后打開控制臺。
現在我們通過 $ 來查看 id 為 query 的元素(和百度的 kw1 元素一樣都是搜索框)，然后查看該元素的屬性方法。?
和剛才一樣的功能，但是現在的代碼已經非常精簡了，用到了 $, dir, $_ 這個三個控制臺屬性和方法，是不是瞬間讓調試變的簡單了？
可能有人會說，現在一般用的都是jQuery，要查看這個怎么辦？
回到百度，我們來做剛才的那個操作。
和剛才的有一點點不一樣，因為 $('#kw1') 這一步得到的是 jQuery 對象，所以我們dir出來的也是jQuery屬性方法。
如果要看真實元素的屬性方法，加一個[0]即可
當然如果你就是要看 jQuery對象，那就完全沒問題了。。調試嘛，當然要一邊調，一邊試啦。。
其實還有一個非常簡單的方法，就是點擊左上角那個放大鏡圖標，然后選擇那個輸入框。
這樣我們可以直接用 $0 進行查看，剛才已經介紹了 $0-$4 了，就是這個功能，簡單吧。
我們來簡單說下 keys 和 values 吧，這個之后也會用到。。但是有些人還是喜歡直接dir查看。
代碼如下:
var obj = {name: '尼瑪', age:22, desc: '屌絲一個'};
最后說個小技巧，就是之前輸入過的命令，不必重新輸入，可以通過方向鍵 ↑ 和 ↓ 進行上下查找，這個功能和 cmd 類似
一??什么是 Console
Console 是用于顯示 JS和 DOM 對象信息的單獨窗口。并且向 JS 中注入1個 console 對象，使用該對象 可以輸出信息到 Console 窗口中。
?
二??什么瀏覽器支持 Console
很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console。而其他瀏覽器都支 持不好。比如 IE8 自帶的開發工具雖然支持 Console，但功能比較單調，顯示對象的時候都是顯示 [Object,Object]，而且不能點擊查看對象里面的屬性。IE6、IE7 雖然可以安裝 Developer Toolbar，但也 不支持 console。Safari、Opera 都支持 Console，但使用上都沒有 FireBug和 Chrome 的方便。 現在firebug推出了 firebuglite工具，可以讓所有瀏覽器都支持Console功能，而且使用上和FireBug 幾乎一樣。詳見?http://getfirebug.com/firebuglite
?
三??為什么不直接使用 alert 或自己寫的 log
使用 alert 不是一樣可以顯示信息，調試程序嗎？alert 彈出窗口會中斷程序， 如果要在循環中顯示信息，手點擊關閉窗口都累死。而且 alert 顯示對象永遠顯示為[object ]。 自己寫的 log 雖然可以顯示一些 object 信息，但很多功能支持都沒有 console 好，看完后面 console 的介紹就知道了。
（部分比較雞肋的方法沒有列出來，用粗藍標出來的是常用的方法）
?
四??Console.log(object[, object, ...])
Console.log 是最簡單輸出信息到 console 窗口的方法，支持多個參數，該方法會把 這些參數組合在一起顯示，e.g：
log?方法第一個參數支持類似 C 語言 printf 字符串替換模式，Log 支持下面幾種替換模式：
?
- %s??代替字符串
- %d??代替整數
- %f??代替浮點值
- %o??代替 Object
e.g:
?
五??console.debug，info，warn，error
這 4 種方法與 log 方法使用一模一樣，只是顯示的圖標和文字顏色不一樣.
?
六??console.assert(expression[, object, ...])
assert 方法類似于單元測試中的斷言，當 expression 表達式為 false 的時候，輸出后面的信息,e.g： 注：assert 方法在 firebuglite 不支持，Chrome 和 FireBug 支持
?
七??console.clear()
該方法清空 console 中的所有信息 (Chrome中不支持)
?
八??console.dirxml(node)
把 html 元素的html 代碼打印出來,等同于log.
?
九??console.trace()
trace 方法可以查看當前函數的調用堆棧信息，即當前函數是如何調用的，e.g:
?
十??console.group(object[, object, ...]), groupCollapsed, groupEnd
這 3 個函數用于把 log 等輸出的信息進行分組，方便閱讀查看。
groupCollapsed 方法與 group 方法一樣，只是顯示的分組默認是折疊的.
?
十一??console.time(name)/console.timeEnd(name)
我們經常需要測試 js 函數的執行時間，可能我們自己寫代碼在第1 條語句和 最后 1 條語句取當前時間相減。這組函數其實就實現了這樣的功能，time(name)根據 name 創建 1 個新 的計時器。timeEnd(name)停止給定name 的計時器，并顯示時間。
?
十二??console.profile(name)/console.profileEnd()
這組方法用于打開瀏覽器的分析器，用于分析這組函數之間的 js 執行情況， 注：firebuglite 不支持 profile 功能，Chrome 支持 profile，但分析的內容不詳。
?
十三??console.count([title])
count 方法用于統計當前代碼被執行過多少次，title 參數可以在次數前面輸出額外的標題以幫助閱讀。e.g:
?
十四??console.table(data)
table 方法把data 對象用表格的方式顯示出來，這在顯示數組或者格式一樣的JSON 對象的時候非常有用。
注：table 只支持 FireBug，而且是在 firebug1.6+版本后才有。
?
總結：?Console 是幫助我們學習和調試 JS的 1 個非常好工具，如果你以前沒用過，哪現在就開始用它吧。
你會發現它能幫你省很多開發時間的。
總結
以上是生活随笔為你收集整理的js调试控制台使用详解图解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： a 中调用js的几种方法整理及使用推荐
- 下一篇： JavaScript之数据类型