文档章节

【JS调试】Console使用详解

冷冷gg
 冷冷gg
发布于 2016/12/09 15:10
字数 1190
阅读 93
收藏 0

1.凡人视角

打印字符串

代码:

console.log("I am a 凡人");

打印提示消息

代码:

console.info("Yes, you arm a 凡人");

打印警告消息

代码:

console.warn("凡人你居然敢窥视我");

打印错误消息

代码:

console.error("天兵天将,把这个凡人给我打入地狱");

打印调试信息

console.debug("我就是传说中的debug");

2.上帝视角

查看所有方法

console 除了上面的几个方法还有什么方法呢?log 除了能打印字符串外,还能打印出对象,我们可以利用 console.log 打印自己。

代码:

console.log(console);

输出:

Object {
    assert: ...,
    clear: ...,
    count: ...,
    debug: ...,
    dir: ...,
    dirxml: ...,
    error: ...,
    group: ...,
    groupCollapsed: ...,
    groupEnd: ...,
    info: ...,
    log: ...,
    markTimeline: ...,
    profile: ...,
    profileEnd: ...,
    table: ...,
    time: ...,
    timeEnd: ...,
    timeStamp: ...,
    timeline: ...,
    timelineEnd: ...,
    trace: ...,
    warn: ...
}

啊咧咧?怎么这么多方法。其实上面的 console 方法 不一定每个浏览器 都有实现,我这边使用的是 chrome浏览器 。所以说,这个特性是非标准的,请尽量不要在 生产环境 中使用它。

但是我们可以在 开发环境 中,合理的利用 这些方法来帮助我们开发。

清理控制台

如果我们在控制台调试的时候,难免 强迫症 发作想清理掉已经乱七八糟的控制台。浏览器和命令行 clear 一样提供了一个清理函数

console.clear() 

当然我们也可以用 chrome 的 command line api 来清理控制台。

clear()

又或者可以使用按键Mac上 cmd + k ,Win ctrl + l(我用的是chrome浏览器)。

分组

当代码非常长,或者我们需要把一个函数,或者一个文件中的函数等区分出来。我们可以使用分组来实现。

代码:

console.group('凡人');
console.log("手");
console.log("脚");
console.groupEnd();

console.group('神');
console.log("法力无边");
console.log("腾云架雾");
console.groupEnd();

输出:

如果想要输出为折叠,我们可以使用

console.groupCollapsed

,用法和 console.group 类似。

查看对象信息

有时候我们需要打印出对象信息,可以使用 console.log 来进行简单的输出。

代码:

var person = {
    head: 1,
    hand: 2,
    leg: 2
};
console.log(person);

呜呜,可是这个显示得好丑,我们这个时候就可以使用传说中的神器 console.table 来帮助我们清楚的显示 关联数组信息。

var data = [
    {
        '姓名': '幼儿园', 
        '性别': '女'
    },
    {
        '姓名': '李狗嗨',
        '数量': 1
    }
];
console.table(data);

但是如果想要看详细的对象信息,我们可以使用 console.dir,将一个 JavaScript 对象的所有属性和属性值显示成一个可交互的列表,它还能打印出函数等。

console.dir(clear);

什么?你想看某个节点中的html代码?没事,我们可以用 console.dirxml 来查看页面中对应元素的 html/xml 内容。

html代码:

<div id='person'>
    <p>I am a 凡人</p>
</div>

javascirpt代码:

var person = document.getElementById('person');
console.dirxml(person);

性能测试

雷军粑粑老是喜欢说:“不服?跑个分。”有时候,我们也需要对代码跑个分。这个时候,我们可以使用console.time和console.timeEnd,他们可以记录代码运行所花费的时间。

console.time("神机妙算");
(function () {
    for(var i = 0; i < 10; i++) {
        var sum = (function () {
            var flog = 0;
            for(var i = 0; i < 10; i++) {
                flog+=i;
            }
        })();
    }
})();
console.timeEnd("神机妙算");

啊咧咧?你这个顶多就是 计时器 怎么能说是 性能测试 。客官别急,我们这还有一个叫做 console.profile 和 console.profileEnd 姐妹呢~~

console.profile("神机妙算");
(function () {
    for(var i = 0; i < 10; i++) {
        var sum = (function () {
            var flog = 0;
            for(var i = 0; i < 10; i++) {
                flog+=i;
            }
        })();
    }
})();
console.profileEnd("神机妙算");

输出会显示在 profile

什么还是不够?你还想知道运行时的结果栈?可以可以,我们这还有一位 console.trace 哦。他可以看透大爷你的一局一动哦。 代码:

function add(num) {
    if (0 < num) {
        console.trace("现在num的值为", num);
        return num + add(num - 1);
    } else {
        return 0;
    }
}

var a =3;
add(3);

判断真假

平时我们在写代码是时候,经常需要判断一下当前值的真假情况,使用if或者三元表达式来达到目的。我们现在也可以使用 console.assert 来判断,该方法会在条件为错误时,返回一个 console.error 的输出。 断言

console.assert(1 == 1);
console.assert(1 == 0);
console.assert(!(1 == 0));

####统计次数

有时候我们需要统计一个函数或者被调用了几次,我们通常会增加一个变量 count 来记录,然后在控制台中查看。这样相当的麻烦,我们可以使用 console.count 函数来帮忙我们记录次数,并输出。

function hi(name) {
    console.count(name);
    return "hi " + name;
}

for(var i = 0; i < 10; i++) {
    if(i < 4) {
        hi("person");
    } else {
        hi("god");
    }
}

总结

console 中有很多对我们调试代码有帮助的函数,我们可以在开发环境中配合 console 来调试代码,使得我们测试更加便利。

本文转载自:https://segmentfault.com/a/1190000006721606

共有 人打赏支持
冷冷gg
粉丝 429
博文 113
码字总数 52275
作品 1
潍坊
UI设计师
私信 提问
Qt Quick调试之显示代码行号

QML 文档可以使用 console 对象来打印日志信息,可默认是无法输出行号的。帮助文档中说需要设置 QMLCONSOLEEXTENDED 环境变量即可,测试了一下不管用。后来找到 qt.gitorious.org 上的一个文...

foruok
2014/10/31
0
0
Firebug控制台详解

Firebug是网页开发的利器,能够极大地提升工作效率。 但是,它不太容易上手。我曾经翻译过一篇《Firebug入门指南》,介绍了一些基本用法。今天,继续介绍它的高级用法。 ==================...

阮一峰
2011/03/26
0
0
bootargs参数详解

U-boot的环境变量值得注意的有两个: bootcmd 和bootargs。 u-bootcmd 前面有说过bootcmd是自动启动时默认执行的一些命令,因此你可以在当前环境中定义各种不同配置,不同环境的参数设置,然...

WXXGoodJob
2017/09/20
0
0
JavaScript之apply、call详解

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向。 call 和 apply二者的作用完全一样,只是接受参数的方式不太一样。...

飛飛飛jjs
2016/11/22
0
0
this详解:JAVASCRIPT中的this到底是谁?

this详解:JAVASCRIPT中的this到底是谁? 语法 this 全局对象 在全局执行上下文(函数之外),this引用的是全局对象. 函数 在函数里面,this这个值,得看怎么来调用这个函数 简单的调用 在这个例子中...

517270667
2017/06/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何很绅士的使用线程池

前言 平时接触过多线程开发的童鞋应该都或多或少了解过线程池,之前发布的《阿里巴巴 Java 手册》里也有一条: 可见线程池的重要性。 简单来说使用线程池有以下几个目的: 线程是稀缺资源,不...

瑞查德-Jack
16分钟前
2
0
Java开发必会的Linux命令

1.查找文件find / -name filename.txt 根据名称查找/目录下的filename.txt文件。find . -name "*.xml" 递归查找所有的xml文件find . -name "*.xml" |xargs grep "hello world" 递归...

奥特曼之王
18分钟前
3
0
【 58沈剑 架构师之路】各种SQL到底加了什么锁?

有朋友留言:你TM讲了这么多,锁分了这么多类型,又和事务隔离级别相关,又和索引相关,究竟能不能直接告诉我,一个SQL到底加了什么锁!? 我竟无言以对。 好吧,做过简单梳理之后,今天尝试...

张锦飞
20分钟前
2
0
打包 压缩 命令tar zip

打包 压缩 命令tar zip tar语法 #压缩 tar -czvf ***.tar.gz tar -cjvf ***.tar.bz2 #解压缩 tar -xzvf ***.tar.gz tar -xjvf ***.tar.bz2  tar [主选项+辅选项] 文件或目录 主选项是必须要...

linjin200
25分钟前
1
0
使用form表单同时实现上传文件和提交文本数据

使用form表单同时实现上传文件和提交文本数据,此示例中在后台将文件上传到阿里的oss存储服务器中 申请oss相关账号: endpoint = "http://oss-cn-qingdao.aliyuncs.com"; accessKeyId = "key"...

貔貅叔
31分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部