嘘,这里可能有你不知道的console小技巧

程序员的日常应该是不断的制造Bug与修复Bug了,而修复Bug的速度往往象征着你经验的高低。身为前端工程师的你console应该是最常用到的调试工具了。殊不知,console居然还有很多你未曾体验过的好方法,本文将带你一探究竟。

console是window对象的属性之一,你可以通过通过console输出有助于调试代码的字符串、数组以及对象,然后通过浏览器控制台(chrome->单击右键->检查->console)查看。
1、输出的四种方式
// 用于输出普通信息console.log("normal:你我皆凡人,生在人世间");// 用于输出提示性信息(应该会有个小图标,不过谷歌不支持)console.info("information:人生不如意十有八九,还有一二三四五六七特别不如意。");// 用于输出错误信息console.error("error:我就是传说中的Bug");// 用于输出警示信息console.warn("warn:没有注释留给你,难写的代码必定难读");

打印结果:

以上四种方法虽然都可以打印,但给予你的视觉冲击是不一样的(info应该会有一个小图标,不过谷歌不支持),这样非常有助于你快速找到相应的信息。

如果要清除打印信息你可以通过:

console.clear()

2、判断

assert方法用于判断。接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数,否则不会有任何结果。

//无任何输出console.assert(1===1,"真");//给予一个错误提示“Assertion failed: 假”console.assert(1!==1,"假");

3、统计

count方法用于计数,输出它被调用了多少次。

(function() {    for (var i = 0; i < 5; i++) {        console.count('count');    }})();

打印结果:

4、分组打印

console.group("A组");console.log("张三");console.log("李四");console.groupEnd();
console.group("B组");console.log("王五");console.log("赵六");console.groupEnd();
// 默认折叠console.groupCollapsed("C组");console.log("低调1");console.log("低调2");console.groupEnd();

打印结果:

5、打印对象

先来定义二个对象:

const box = {    userName:"laoTie",    age:18,    sex:"女"};const desk = {    userName:"laoWang",    age:88,    sex:"男"};

如果现在要将这两个对象全部打印出来,我们一般这样:

console.log(box,desk);

运行结果:

从结果来看,我们并不知道打印出来的内容具体来自于哪一个对象。如果我们换一种方式:

console.log({box,desk});

这样我们就可以知道具体打印的是哪一个对象了:

6、CSS渲染

如果需要添加打印样式的话,就需要用到%c 占位符。%c 占位符也是console最常用的。使用 %c 占位符时,对应的后面的参数必须是 CSS 语句,用来对输出内容进行 CSS 渲染。

const str = "十行代码九个警告八个错误竟然敢说七日精通六天学会五湖四海也不见如此三心二意之项目经理简直一等下流。"// 输出带样式文字console.log("%c "+str,"color: red; font-size: 30px;font-weight:bold");

打印结果:

7、将对象打印成表格

我们可以使用table方法来用表格方式打印对象:

const box = {    userName:"laoTie",    age:18,    sex:"女"};const desk = {    userName:"laoWang",    age:88,    sex:"男"};console.table({box,desk})

打印结果:

8、计时器

我们可以通过time方法打印代码的耗时情况:

// 计时开始console.time('计时器');let i = 0;while (i < 9999999){    i++;}// 计时结束console.timeEnd('计时器');

打印结果:

9、追踪函数调用过程

通过trace可以追踪到我们的方法被调用的情况:

function one(a) {    console.trace();    return a;}function two(a) {    return three(a);}function three(a) {    return one(a);}var a = two(666);

打印结果:

最后

合理的利用console的各种方法,会使我们的调试过程更加愉悦。

不过console除了本身作为调试利器以外,还被一些网站作为招聘人才的一种广告手段,例如百度:

输出代码:

try{    window.console &&    window.console.log &&    (        console.log("同学,祝贺你喜提彩蛋~\n" +            "或许你们还在犹豫是否加入,我会坦诚的告诉你我们超酷;\n" +            "在这里大家都用无人车代步,AI音箱不仅播放还可以交互;\n" +            "人工智能是发展的核心技术,做自己让未来不只领先几步;\n" +            "在这里做自己,欢迎来到百度!\n"),        console.log("%c百度2019校园招聘简历提交:" +            "http://dwz.cn/XpoFdepe " +            "你将有机会直接获得面试资格)"            ,"color:red")    )}catch(e){}
天猫可以说是将console利用到了极致!除了招聘信息外,它还在警告你:别在我的控制台瞎折腾,后果很严重!

输出代码:

var e={    "info":"喵~ 加入我们吧 https://tb.cn/iS8NBOy",    "logo":"   :::                                :::  \n" +    " :::::::                             ::::: \n" +    ":::::::::                          ::::::::\n" +    ":::::::::::::::::::::::::::::::::::::::::::\n" +    "::::    :::    ::::::::::::::::   :::  ::::\n" +    ":::    Smart    :::::cool::::    Crazy  :::\n" +    ":::::   :::    :::::::::::::::    :::   :::\n" +    ":::::::::::::::::::::::::::::::::::::::::::"};try {    window.console && console.log &&    (        console.log("%c 安全警告",            "font-size:50px;" +            "color:red;" +            "-webkit-text-fill-color:red;" +            "-webkit-text-stroke: 1px black;"),        console.log("%c 此浏览器功能专供开发者使用。" +            "请不要在此粘贴执行任何内容," +            "这可能会导致您的账户受到攻击," +            "给您带来损失 !",            "font-size: 20px;color:#333"),        console.info(e.logo+"\n\n"+e.info)    )}catch(e){}
[公众号回复“电子书”,送你经典前端电子书籍]

—————END—————

本文分享自微信公众号 - 张培跃(zhangpeiyue8)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大白技术控的技术自留地

改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)

博客园的markdown模式下的代码高亮功能使用的是highlight.js,没有行号和显示相应编程语言的功能,只好自己将其改造了一下(将这两种功能一并实现了)...

42950
来自专栏Android开发与分享

【前端】CSS : 入门

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

10520
来自专栏Android开发与分享

【前端】CSS : display

设置了该属性之后设置高度、宽度都无效,同时text-align属性设置也无效,但是设置了line-height会让inline元素居中

12510
来自专栏Android开发与分享

【前端】CSS : position

正常的布局行为,即元素在文档常规流中当前的布局位置。此时top, right, bottom, left和 z-index 属性无效。

10710
来自专栏前端说吧

css特效 - 环形文字

32130
来自专栏Android开发与分享

【前端】CSS : float

注:当一个元素浮动之后,从普通文档流中脱离,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。

12110
来自专栏大白技术控的技术自留地

Chorme浏览器渲染MathJax时出现竖线的解决方法

新版的Chorme浏览器在解析css时,会对其中的值进行向上取整(四舍五入),而其他浏览器不会,且Chrome较旧版本(比如Chrome 40 稳定版)也是不会...

12420
来自专栏SeanCheney的专栏

解析网页速度比较(BeautifulSoup、PyQuery、lxml、正则)

用标题中的四种方式解析网页,比较其解析速度。复习PyQuery和PySpider,PySpider这个项目有点老了,现在还是使用被淘汰的PhantomJS。 ...

22220
来自专栏Android开发与分享

【前端】CSS : 对齐、居中

文本、元素的对齐和居中在开发中经常会用到。本文分别对文本、元素的对齐、居中进行介绍

22120
来自专栏小轻论坛

小白也能轻松为网页加各种部件

小轻相信,许多人对网页是很感兴趣并且是很想学习的。当初创立小轻网及小轻论坛网页就是为了帮助大家学习一些技术经验,同时也学会如何去找资源。今天,我们给原有网页加一...

20630

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励