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()一樣，在有調試工具的瀏覽器上支持較好，各大瀏覽器均支持此功能。
相關文章
這篇文章主要介紹了a標簽click和href執(zhí)行順序,需要的朋友可以參考下2014-06-06
From表單組件具有數據收集、提交數據的功能,某種程度上說它就是一個容器,下面這篇文章主要給大家介紹了關于uniapp表單驗證的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了微信小程序canvas截取任意形狀的實現代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
對于模糊查詢,一般都是傳關鍵字給后端,由后端來做。但是有時候一些輕量級的列表前端來做可以減少ajax請求,在一定程度上提高用戶體驗,這篇文章主要給大家介紹了關于前端JavaScript如何實現本地模糊搜索功能的相關資料,需要的朋友可以參考下2021-07-07
bootstrap datetimepicker日期插件使用方法
這篇文章主要為大家詳細介紹了bootstrap datetimepicker的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家詳細介紹了微信小程序實現搜索商品和歷史記錄的功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JS中作用域以及變量范圍分析,需要的朋友可以參考下2020-07-07
這篇文章主要為大家詳細介紹了js實現簡單掃雷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細介紹了使用JS實現簡單的圖片切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
詳解extract-text-webpack-plugin 的使用及安裝
這篇文章主要介紹了詳解extract-text-webpack-plugin 的使用及安裝，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06