你所不知道 ❌ Console

lovXin 发布于2019-08-01 15:41 / 1747人阅读

前言

console.log 可以是在日常 Web 开发中最常用的方法了，但是你应该知道 console 比你想象的强。

1.凡人视角 打印字符串

代码：

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

打印提示消息

代码：

console.info("Yes, you are 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() 。

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代码：


    I am a 凡人

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 来调试代码，使得我们测试更加便利。

一起成长

在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。

如果您想让更多人看到文章可以点个点赞。

如果您想激励小二可以到 Github 给个 小星星。

如果您想与小二更多交流添加微信 m353839115。

本文原稿来自 PushMeTop

GPU云服务器云服务器你所 console console.log console.log()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50044.html

前端面试你所不知道系列

摘要：请注意是创建一个全局对象的属性，而不是声明了一个全局变量。由于变量声明自带不可删除属性，比较跟，前者是变量声明，带不可删除属性，因此无法被删除后者为全局变量的一个属性，因此可以从全局变量中删除。下期预告前端面试你所不知道系列伪类和伪元素写在开始又到了一年的伊始，很多人可能因为各种原因想换一份工作，而找工作难免遇到各种各样头痛的面试题，于是我打算写一个系列，关于面试中最常见或者前端一...

Julylovin 2019-08-26 11:37 评论0 收藏0
你所不知道 ❌ Console

前言 console.log 可以是在日常 Web 开发中最常用的方法了，但是你应该知道 console 比你想象的强。 1.凡人视角打印字符串代码： console.log(I am a 凡人); 打印提示消息代码： console.info(Yes, you are a 凡人); 打印警告消息代码： console.warn(凡人你居然敢窥视我); 打印错误消息代码： console...

scq000 2019-08-20 10:47 评论0 收藏0
关于JavaScript对象，你所不知道的事（一）- 先谈对象

摘要：对象与属性让我们保持耐心，再梳理一下对象与属性的关系对象是属性的集合，当对象的属性是函数时，我们将其称之为方法。这篇博文的主要目的是为了填坑，很久之前我发表了一篇名为关于JavaScript对象中的一切（一） — 对象属性的文章，想要谈一谈JavaScript对象，可那时只是贴了一张关于这个主题的思维导图，今天我会针对这一主题进行展开，将JavaScript对象一些平常不太常用的知识...

mykurisu 2019-08-21 17:49 评论0 收藏0
一些你所不知道的VS Code插件

摘要：摘要你所不知道的系列。允许你写入缩写代码并返回的相应标记，目前已经内置，所以不用配置了。自从年双十一正式上线，累计处理了亿错误事件，付费客户有金山软件百姓网等众多品牌企业。摘要：你所不知道的系列。原文：提高 JavaScript 开发效率的高级 VSCode 扩展之二！作者：前端小智 Fundebug经授权转载，版权归原作者所有。作为一名业余爱好者、专业人员，甚至是每月只有一次编...

Near_Li 2019-05-22 12:00 评论0 收藏0
关于JavaScript对象，你所不知道的事（二）- 再说属性

摘要：但好在还给我们提供了一个方法，每一个对象都有这样一个方法，专门用来判断某个属性是否是该对象的私有属性。如果你想要用对象字面形式，你只能在创建对象时定义访问器属性。在中，我们使用冻结一个对象，并且使用来判断一个对象是否被冻结。说完了对象那些不常用的冷知识，是时候来看看JavaScript中对象属性有哪些有意思的东西了。不出你所料，对象属性自然也有其相应的特征属性，但是这个话题有点复杂...

Richard_Gao 2019-08-21 17:49 评论0 收藏0