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() 。

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

你所不知道的 Console的更多相关文章

  1. 你所不知道的setInterval

    在你所不知道的setTimeout记载了下setTimeout相关,此篇则整理了下setInterval:作为拥有广泛应用场景(定时器,轮播图,动画效果,自动滚动等等),而又充满各种不确定性的这set ...

  2. 你所不知道的setTimeout

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务.初始接触它的人都觉得好简单 ...

  3. 你所不知道的linq(二)

    上一篇说了from in select的本质,具体参见你所不知道的linq.本篇说下from...in... from... in... select 首先上一段代码,猜猜结果是什么? class P ...

  4. JavaScript中你所不知道的Object(二)--Function篇

    上一篇(JavaScript中你所不知道的Object(一))说到,Object对象有大量的内部属性,而其中多数和外部属性的操作有关.最后留了个悬念,就是Boolean.Date.Number.Str ...

  5. js值----你所不知道的JavaScript系列(6)

    1.数组 在 JavaScript 中,数组可以容纳任何类型的值,可以是字符串.数字.对象(object),甚至是其他数组(多维数组就是通过这种方式来实现的) .----<你所不知道的JavaS ...

  6. 闭包----你所不知道的JavaScript系列(4)

    一.闭包是什么? · 闭包就是可以使得函数外部的对象能够获取函数内部的信息. · 闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. · 闭包就 ...

  7. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  8. 关于setTimeout()你所不知道的地方,详解setTimeout()

    关于setTimeout()你所不知道的地方,详解setTimeout() 前言:看了这篇文章,1.注意setTimeout引用的是全部变量还是局部变量了,当直接调用外部函数方法时,实际上函数内部的变 ...

  9. 你所不知道的库存超限做法 服务器一般达到多少qps比较好[转] JAVA格物致知基础篇:你所不知道的返回码 深入了解EntityFramework Core 2.1延迟加载(Lazy Loading) EntityFramework 6.x和EntityFramework Core关系映射中导航属性必须是public? 藏在正则表达式里的陷阱 两道面试题,带你解析Java类加载机制

    你所不知道的库存超限做法 在互联网企业中,限购的做法,多种多样,有的别出心裁,有的因循守旧,但是种种做法皆想达到的目的,无外乎几种,商品卖的完,系统抗的住,库存不超限.虽然短短数语,却有着说不完,道不 ...

随机推荐

  1. KDChart example

    /******************************************************************************** ** Form generated ...

  2. Qt编写自定义控件42-开关按钮

    一.前言 从2010年进入互联网+智能手机时代以来,各种各样的APP大行其道,手机上面的APP有很多流行的元素,开关按钮个人非常喜欢,手机QQ.360卫士.金山毒霸等,都有很多开关控制一些操作,在Qt ...

  3. LeetCode_111. Minimum Depth of Binary Tree

    111. Minimum Depth of Binary Tree Easy Given a binary tree, find its minimum depth. The minimum dept ...

  4. Node.js event loop 和 JS 浏览器环境下的事件循环的区别

    Node.js  event loop 和 JS 浏览器环境下的事件循环的区别: 1.线程与进程: JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 进程是 CPU ...

  5. expect自动登录

    .安装软件 yum install expect -y .查看expect命令位置 expect命令的位置也可能是在 /usr/local/bin/expect,使用前用户应确认工具是否存在(确认方法 ...

  6. 第一次linux下安装nginx记录

    CentOS 7 安装Nginx 并配置自动启动 1.下载Nginx安装包---->地址:http://nginx.org/en/download.html 2.上传安装包到服务期 : rz 命 ...

  7. 关于远程链接 redis的坑·

    今天遇到了一个问题,在redis.conf 中 将 bind: 注释掉bind 127.0.0.1 仍然不行 其实是要把bind 127.0.0.1 改为 0.0.0.0 才行 下面附赠详细过程 查看 ...

  8. 最新 东方网java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.东方网等10家互联网公司的校招Offer,因为某些自身原因最终选择了东方网.6.7月主要是做系统复习.项目复盘.LeetCo ...

  9. js 数组去重、去空(收藏)

    function unique (arr) { return Array.from(new Set(arr)) } var arr = [1,1,'true','true',true,true,15, ...

  10. CCF201403 无线网络【限制型最短路】

    问题描述 目前在一个很大的平面房间里有 n 个无线路由器,每个无线路由器都固定在某个点上.任何两个无线路由器只要距离不超过 r 就能互相建立网络连接. 除此以外,另有 m 个可以摆放无线路由器的位置. ...