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 相关文章推荐
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
jquery提示效果实例分析
Nov 25 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
PHP 中的一些经验积累
2006/10/09 PHP
人大复印资料处理程序_补充篇
2006/10/09 PHP
php表单提交实例讲解
2015/11/12 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
基于jQuery的星级评分插件
2011/08/12 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
jquery 使用简明教程
2014/03/05 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
python config文件的读写操作示例
2019/09/27 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
2015年办公室个人工作总结
2015/04/20 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书