JavaScript中的console.group()函数详细介绍


Posted in Javascript onDecember 29, 2014

在使用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控制台中的输出结果为:

JavaScript中的console.group()函数详细介绍

可以看到,本应有一定层级关系的日志输出在显示时并没有任何区别。为了添加层级关系,可以对日志输出进行分组,在开始分组的地方插入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控制台中的输出结果为:

JavaScript中的console.group()函数详细介绍

浏览器支持

console.group()与console.log()一样,在有调试工具的浏览器上支持较好,各大浏览器均支持此功能。

Javascript 相关文章推荐
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
小米公司JavaScript面试题
Dec 29 #Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 #Javascript
JavaScript中的console.trace()函数介绍
Dec 29 #Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 #Javascript
jQuery中element选择器用法实例
Dec 29 #Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 #Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 #Javascript
You might like
虫族 Zerg 魔法科技
2020/03/14 星际争霸
德生H-501的评价与改造
2021/03/02 无线电
打造计数器DIY三步曲(中)
2006/10/09 PHP
基于mysql的论坛(2)
2006/10/09 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
Python单元测试框架unittest简明使用实例
2015/04/13 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
python实现汉诺塔算法
2021/03/01 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
管理科学大学生求职信
2013/11/13 职场文书
个人银行贷款担保书
2014/04/01 职场文书
保险公司演讲稿
2014/09/02 职场文书
个人作风建设心得体会
2014/10/22 职场文书
党支部评议意见
2015/06/02 职场文书
四群教育工作总结
2015/08/10 职场文书
网络研修心得体会
2016/01/08 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL