JavaScript中的console.group()函數詳細介紹
更新時間：2014年12月29日 10:44:43 投稿：junjie
這篇文章主要介紹了JavaScript中的console.group()函數詳細介紹,當程序調試日志過多時會有些雜亂,此時可以使用console.group()函數調來分組顯示,需要的朋友可以參考下
在使用console.log()或者其它日志級別的控制臺輸出功能時，日志輸出是沒有層級關系的。當程序中日志輸出較多時，這一局限性將帶來不小的麻煩。為了解決這一問題，可以使用console.group()。以下面代碼為例：
復制代碼 代碼如下:
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控制臺中的輸出結果為:
可以看到，本應有一定層級關系的日志輸出在顯示時并沒有任何區(qū)別。為了添加層級關系，可以對日志輸出進行分組，在開始分組的地方插入console.group()，在結束分組的地方插入console.groupEnd()：
復制代碼 代碼如下:
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控制臺中的輸出結果為：
瀏覽器支持
console.group()與console.log()一樣，在有調試工具的瀏覽器上支持較好，各大瀏覽器均支持此功能。
相關文章
拖動后怎么把布局結果保存呢？？我開始考慮是記錄每個拖動對象的的坐標，可做起來我感覺好麻煩，所以就沒有采用這種方法。2010-10-10
這篇文章主要介紹了js 下拉菜單點擊旁邊收起實現(踩坑記)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了JavaScript toDataURL圖片轉換問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
下面小編就為大家?guī)硪黄唵握務勗鷍s的math對象。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
JS打開層/關閉層/移動層動畫效果的實例代碼，需要的朋友可以參考一下2013-05-05
在Chrome FF里都能改變成功，但在IE下卻不行，網上搜了半天，大概了解了，這個是IE的一個bug，具體的解決方法如下，有類似問題的朋友可以參考下哈，希望對大家有所幫助2013-07-07
js自執(zhí)行函數的幾種不同寫法的比較,需要的朋友可以參考下2012-08-08
String 的擴展方法集合，可以是javascript對string的功能更多2008-06-06
這篇文章主要介紹了JavaScript 字符串常用操作的知識,包括字符串截取，查找類的方法，對js字符串操作相關知識感興趣的朋友一起學習吧2016-11-11
這篇文章主要介紹了redux處理異步action解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03