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控件的相对独立性
Sep 06 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
javascript每日必学之循环
Feb 19 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
javascript实现电商放大镜效果
Nov 23 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/11/19 PHP
PHP图片上传类带图片显示
2006/11/25 PHP
PHP读取MySQL数据代码
2008/06/05 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
Python之列表实现栈的工作功能
2019/01/28 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
django正续或者倒序查库实例
2020/05/19 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
秘书英文求职信范文
2014/01/31 职场文书
喝酒检查书范文
2014/02/23 职场文书
商场周年庆活动方案
2014/08/19 职场文书
2014年绿化工作总结
2014/12/09 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android