JavaScript中的console.group()函數(shù)詳細(xì)介紹
更新時間：2014年12月29日 10:44:43 投稿：junjie
這篇文章主要介紹了JavaScript中的console.group()函數(shù)詳細(xì)介紹,當(dāng)程序調(diào)試日志過多時會有些雜亂,此時可以使用console.group()函數(shù)調(diào)來分組顯示,需要的朋友可以參考下
在使用console.log()或者其它日志級別的控制臺輸出功能時，日志輸出是沒有層級關(guān)系的。當(dāng)程序中日志輸出較多時，這一局限性將帶來不小的麻煩。為了解決這一問題，可以使用console.group()。以下面代碼為例：
復(fù)制代碼 代碼如下:
function doTask(){
doSubTaskA(1000);
doSubTaskA(100000);
console.log("Task Stage 1 is completed");
doSubTaskB(10000);
console.log("Task Stage 2 is completed");
doSubTaskC(1000,10000);
console.log("Task Stage 3 is completed");
}
function doSubTaskA(count){
console.log("Starting Sub Task A");
for(var i=0;i<count;i++){}
}
function doSubTaskB(count){
console.log("Starting Sub Task B");
for(var i=0;i<count;i++){}
}
function doSubTaskC(countX,countY){
console.log("Starting Sub Task C");
for(var i=0;i<countX;i++){
for(var j=0;j<countY;j++){}
}
}
doTask();
在Firebug控制臺中的輸出結(jié)果為:
可以看到，本應(yīng)有一定層級關(guān)系的日志輸出在顯示時并沒有任何區(qū)別。為了添加層級關(guān)系，可以對日志輸出進(jìn)行分組，在開始分組的地方插入console.group()，在結(jié)束分組的地方插入console.groupEnd()：
復(fù)制代碼 代碼如下:
function doTask(){
console.group("Task Group");
doSubTaskA(1000);
doSubTaskA(100000);
console.log("Task Stage 1 is completed");
doSubTaskB(10000);
console.log("Task Stage 2 is completed");
doSubTaskC(1000,10000);
console.log("Task Stage 3 is completed");
console.groupEnd();
}
function doSubTaskA(count){
console.group("Sub Task A Group");
console.log("Starting Sub Task A");
for(var i=0;i<count;i++){}
console.groupEnd();
}
function doSubTaskB(count){
console.group("Sub Task B Group");
console.log("Starting Sub Task B");
for(var i=0;i<count;i++){}
console.groupEnd();
}
function doSubTaskC(countX,countY){
console.group("Sub Task C Group");
console.log("Starting Sub Task C");
for(var i=0;i<countX;i++){
for(var j=0;j<countY;j++){}
}
console.groupEnd();
}
doTask();
插入console.group()語句后Firebug控制臺中的輸出結(jié)果為：
瀏覽器支持
console.group()與console.log()一樣，在有調(diào)試工具的瀏覽器上支持較好，各大瀏覽器均支持此功能。
您可能感興趣的文章:
- 利用Js的console對象,在控制臺打印調(diào)式信息測試Js的實(shí)現(xiàn)
- JS中捕獲console.log()輸出的方法
- JavaScript中的console.assert()函數(shù)介紹
- JavaScript中的console.dir()函數(shù)介紹
- JavaScript中的console.trace()函數(shù)介紹
- JavaScript中的console.profile()函數(shù)詳細(xì)介紹
- JavaScript中的console.time()函數(shù)詳細(xì)介紹
- node.js中的console用法總結(jié)
- Javascript調(diào)試之console對象——你不知道的一些小技巧
相關(guān)文章
拖動后怎么把布局結(jié)果保存呢？？我開始考慮是記錄每個拖動對象的的坐標(biāo)，可做起來我感覺好麻煩，所以就沒有采用這種方法。2010-10-10
js 下拉菜單點(diǎn)擊旁邊收起實(shí)現(xiàn)(踩坑記)
這篇文章主要介紹了js 下拉菜單點(diǎn)擊旁邊收起實(shí)現(xiàn)(踩坑記)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JavaScript toDataURL圖片轉(zhuǎn)換問題解讀
這篇文章主要介紹了JavaScript toDataURL圖片轉(zhuǎn)換問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
下面小編就為大家?guī)硪黄唵握務(wù)勗鷍s的math對象。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
JS打開層/關(guān)閉層/移動層動畫效果的實(shí)例代碼
JS打開層/關(guān)閉層/移動層動畫效果的實(shí)例代碼，需要的朋友可以參考一下2013-05-05
js改變img標(biāo)簽的src屬性在IE下沒反應(yīng)的解決方法
在Chrome FF里都能改變成功，但在IE下卻不行，網(wǎng)上搜了半天，大概了解了，這個是IE的一個bug，具體的解決方法如下，有類似問題的朋友可以參考下哈，希望對大家有所幫助2013-07-07
js自執(zhí)行函數(shù)的幾種不同寫法的比較,需要的朋友可以參考下2012-08-08
javascript String 的擴(kuò)展方法集合
String 的擴(kuò)展方法集合，可以是javascript對string的功能更多2008-06-06
JavaScript 字符串常用操作小結(jié)(非常實(shí)用)
這篇文章主要介紹了JavaScript 字符串常用操作的知識,包括字符串截取，查找類的方法，對js字符串操作相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-11-11
這篇文章主要介紹了redux處理異步action解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03