欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中的console.group()函數(shù)詳細介紹

 更新時間：2014年12月29日 10:44:43   投稿：junjie  
這篇文章主要介紹了JavaScript中的console.group()函數(shù)詳細介紹,當程序調(diào)試日志過多時會有些雜亂,此時可以使用console.group()函數(shù)調(diào)來分組顯示,需要的朋友可以參考下

在使用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控制臺中的輸出結(jié)果為:

可以看到，本應有一定層級關系的日志輸出在顯示時并沒有任何區(qū)別。為了添加層級關系，可以對日志輸出進行分組，在開始分組的地方插入console.group()，在結(jié)束分組的地方插入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控制臺中的輸出結(jié)果為：

瀏覽器支持

console.group()與console.log()一樣，在有調(diào)試工具的瀏覽器上支持較好，各大瀏覽器均支持此功能。

相關文章

  • a標簽click和href執(zhí)行順序探討

    a標簽click和href執(zhí)行順序探討

    這篇文章主要介紹了a標簽click和href執(zhí)行順序,需要的朋友可以參考下
    2014-06-06
  • uniapp表單驗證方法詳解

    uniapp表單驗證方法詳解

    From表單組件具有數(shù)據(jù)收集、提交數(shù)據(jù)的功能,某種程度上說它就是一個容器,下面這篇文章主要給大家介紹了關于uniapp表單驗證的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-10-10
  • 微信小程序canvas截取任意形狀的實現(xiàn)代碼

    微信小程序canvas截取任意形狀的實現(xiàn)代碼

    這篇文章主要介紹了微信小程序canvas截取任意形狀的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-01-01
  • 前端JavaScript實現(xiàn)本地模糊搜索功能的方法實例

    前端JavaScript實現(xiàn)本地模糊搜索功能的方法實例

    對于模糊查詢,一般都是傳關鍵字給后端,由后端來做。但是有時候一些輕量級的列表前端來做可以減少ajax請求,在一定程度上提高用戶體驗,這篇文章主要給大家介紹了關于前端JavaScript如何實現(xiàn)本地模糊搜索功能的相關資料,需要的朋友可以參考下
    2021-07-07
  • bootstrap datetimepicker日期插件使用方法

    bootstrap datetimepicker日期插件使用方法

    這篇文章主要為大家詳細介紹了bootstrap datetimepicker的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-01-01
  • 微信小程序?qū)崿F(xiàn)搜索商品和歷史記錄的功能

    微信小程序?qū)崿F(xiàn)搜索商品和歷史記錄的功能

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)搜索商品和歷史記錄的功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • JS中作用域以及變量范圍分析

    JS中作用域以及變量范圍分析

    這篇文章主要介紹了JS中作用域以及變量范圍分析,需要的朋友可以參考下
    2020-07-07
  • js實現(xiàn)簡單掃雷

    js實現(xiàn)簡單掃雷

    這篇文章主要為大家詳細介紹了js實現(xiàn)簡單掃雷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-08-08
  • 使用JS實現(xiàn)簡單的圖片切換功能

    使用JS實現(xiàn)簡單的圖片切換功能

    這篇文章主要為大家詳細介紹了使用JS實現(xiàn)簡單的圖片切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • 詳解extract-text-webpack-plugin 的使用及安裝

    詳解extract-text-webpack-plugin 的使用及安裝

    這篇文章主要介紹了詳解extract-text-webpack-plugin 的使用及安裝，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06

最新評論