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 相关文章推荐
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
详解iframe与frame的区别
Jan 13 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
PHP n个不重复的随机数生成代码
2009/06/23 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
CI框架Session.php源码分析
2014/11/03 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
python3实现暴力穷举博客园密码
2016/06/19 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
便捷提取python导入包的属性方法
2018/10/15 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
django 自定义过滤器的实现
2019/02/26 Python
python-numpy-指数分布实例详解
2019/12/07 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
委托书的格式
2014/08/01 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL