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检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
小米公司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扩展imagick
2014/06/02 PHP
PHP闭包实例解析
2014/09/08 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
跟老齐学Python之正规地说一句话
2014/09/28 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Python MD5加密实例详解
2017/08/02 Python
python的pip安装以及使用教程
2018/09/18 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
最新pycharm安装教程
2020/11/18 Python
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
试用期转正鉴定评语
2014/01/27 职场文书
商场消防安全责任书
2014/07/29 职场文书
2014离婚协议书范文
2014/09/10 职场文书
车辆委托书范本
2014/10/05 职场文书
运动会观后感
2015/06/09 职场文书