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 相关文章推荐
jquery indexOf使用方法
Aug 19 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
小米公司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实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
Django与JS交互的示例代码
2017/08/23 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
前处理班长职位说明书
2014/03/01 职场文书
教师节横幅标语
2014/10/08 职场文书
公务员个人考察材料
2014/12/23 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
诚信考试主题班会
2015/08/17 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
如何在Python中妥善使用进度条详解
2022/04/05 Python
Python  lambda匿名函数和三元运算符
2022/04/19 Python