你真的了解 console 吗

edagarli 发布于2019-08-21 12:16 / 3363人阅读

摘要：最常用的语句就是了。对象除了这一最常被开发者使用的方法之外，还有很多其他的方法。用来追踪函数的调用过程。输出输出参数的内容，作为警告提示。支持的占位符有四种，分别是字符整数或浮点数和对象。

对于前端开发者来说，在开发过程中需要监控某些表达式或变量的值的时候，用 debugger 会显得过于笨重，取而代之则是会将值输出到控制台上方便调试。最常用的语句就是console.log(expression)了。

然而对于作为一个全局对象的console对象来说，大多数人了解得还并不全面，当然我也是，经过我的一番学习，现在对于这个能玩转控制台的 JS 对象有了一定的认识，想与大家分享一下。

console 对象除了console.log()这一最常被开发者使用的方法之外，还有很多其他的方法。灵活运用这些方法，可以给开发过程增添许多便利。

console 的方法

console.assert(expression, object[, object...])

接收至少两个参数，第一个参数的值或返回值为false的时候，将会在控制台上输出后续参数的值。例如：

console.assert(1 == 1, object); // 无输出，返回 undefined
console.assert(1 == 2, object); // 输出 object

console.count([label])

输出执行到该行的次数，可选参数 label 可以输出在次数之前，例如：

(function() {
  for (var i = 0; i < 5; i++) {
    console.count("count");
  }
})();
// count: 1
// count: 2
// count: 3
// count: 4
// count: 5

console.dir(object)

将传入对象的属性，包括子对象的属性以列表形式输出，例如：

var obj = {
  name: "classicemi",
  college: "HUST",
  major: "ei"
};
console.dir(obj);

输出：

console.error(object[, object...])

用于输出错误信息，用法和常见的console.log一样，不同点在于输出内容会标记为错误的样式，便于分辨。输出结果：

console.group

这是个有趣的方法，它能够让控制台输出的语句产生不同的层级嵌套关系，每一个console.group()会增加一层嵌套，相反要减少一层嵌套可以使用console.groupEnd()方法。语言表述比较无力，看代码：

console.log("这是第一层");
console.group();
console.log("这是第二层");
console.log("依然第二层");
console.group();
console.log("第三层了");
console.groupEnd();
console.log("回到第二层");
console.groupEnd();
console.log("回到第一层");

输出结果：

和console.group()相似的方法是console.groupCollapsed()作用相同，不同点是嵌套的输出内容是折叠状态，在有大段内容输出的时候使用这个方法可以使输出版面不至于太长。。。吧

console.info(object[, object...])

此方法与之前说到的console.error一样，用于输出信息，没有什么特别之处。

console.info("info"); // 输出 info

console.table()

可将传入的对象，或数组以表格形式输出，相比传统树形输出，这种输出方案更适合内部元素排列整齐的对象或数组，不然可能会出现很多的 undefined。

var obj = {
  foo: {
    name: "foo",
    age: "33"
  },
  bar: {
    name: "bar",
    age: "45"
  }
};

var arr = [
  ["foo", "33"],
  ["bar", "45"]
];

console.table(obj);
console.table(arr);

也可以

console.log(object[, object...])

这个不用多说，这个应该是开发者最常用的吧，也不知道是谁规定的。。。

console.log("log"); // 输出 log

console.profile([profileLabel])

这是个挺高大上的东西，可用于性能分析。在 JS 开发中，我们常常要评估段代码或是某个函数的性能。在函数中手动打印时间固然可以，但显得不够灵活而且有误差。借助控制台以及console.profile()方法我们可以很方便地监控运行性能。

例如下面这段代码：

function parent() {
  for (var i = 0; i < 10000; i++) {
    childA()
  }
}

function childA(j) {
  for (var i = 0; i < j; i++) {}
}

console.profile("性能分析");
parent();
console.profileEnd();

然后我们可以在 Profiles 面板下看到上述代码运行过程中的消耗时间。

页面加载过程的性能优化是前端开发的一个重要部分，使用控制台的 profiles 面板可以监控所有 JS 的运行情况使用方法就像录像机一样，控制台会把运行过程录制下来。如图，工具栏上有录制和停止按钮。

录制结果：

console.time(name)
计时器，可以将成对的console.time()和console.timeEnd()之间代码的运行时间输出到控制台上，name参数可作为标签名。

console.time("计时器");
for (var i = 0; i < 1000; i++) {
  for (var j = 0; j < 1000; j++) {}
}
console.timeEnd("计时器");

（刚才实际多写了一层循环，结果电脑风扇呜呜转啊，浏览器直接无响应了。。。）

console.trace()

console.trace()用来追踪函数的调用过程。在大型项目尤其是框架开发中，函数的调用轨迹可以十分复杂，console.trace()方法可以将函数的被调用过程清楚地输出到控制台上。

function tracer(a) {
  console.trace();
  return a;
}

function foo(a) {
  return bar(a);
}

function bar(a) {
  return tracer(a);
}

var a = foo("tracer");

输出：

console.warn(object[, object...])

输出参数的内容，作为警告提示。

console.warn("warn"); // 输出 warn

占位符

console对象上的五个直接输出方法，console.log(),console.warn(),console.error(),console.exception()(等同于console.error())和console.info()，都可以使用占位符。支持的占位符有四种，分别是字符(%s)、整数(%d 或 %i)、浮点数(%f)和对象(%o)。

console.log("%s是%d年%d月%d日", "今天", 2014, 4, 15);
console.log("圆周率是%f", 3.14159);

var obj = {
  name: "classicemi"
}
console.log("%o", obj);

还有一种特殊的标示符%c，对输出的文字可以附加特殊的样式，当进行大型项目开发的时候，代码中可能有很多其他开发者添加的控制台语句。开发者对自己的输出定制特别的样式就可以方便自己在眼花缭乱的输出结果中一眼看到自己需要的内容。想象力丰富的童鞋也可以做出有创意的输出信息，比如常见的招聘信息和个人介绍啥的。

输出结果：

console.log("%cMy name is classicemi.", "color: #fff; background: #f40; font-size: 24px;");

%c标示符可以用各种 CSS 语句来为输出添加样式，再随便举个栗子，background属性的url()中添加图片路径就可以实现图片的输出了，各位前端童鞋快施展你们的 CSS 神技来把控制台玩坏吧~~

参考文献

https://developer.mozilla.org/en-US/docs/Web/API/console

http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

http://blog.segmentfault.com/civerzhu/1190000000425386

http://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable

云服务器 GPU云服务器说说你所了解的人工智能外呼系统阿里云服务器你了解了吗广告联盟是真的吗 linux系统真的安全吗

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

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

你真的了解this指向吗？

摘要：前言相信很多人都对中的指向问题一知半解，所以今天就来详细看看它到底是怎么判断的。椎确来说是函数调用时是否有引用上下文对象。隐式绑定，上下文对象无上下文对象显示绑定这也是常用的的方式就不一一举例了。前言相信很多人都对JavaScript中的this指向问题一知半解，所以今天就来详细看看它到底是怎么判断的。一. 先看几道题 var length = 10; functio...

liaorio 2019-08-23 17:01 评论0 收藏0
你真的了解javascript吗？（一）

摘要：表示要解析的数字的基数。回调函数接收四个参数，依次是通过上一次调用回调函数获得的值。如果向方法提供，则在首次调用函数时，为。当前数组元素的值。原题出处：JavaScript Puzzlers!当初以为不过是一些小题目，结果做到怀疑人生，都要怀疑可能我javascript白学了。读者可以去试试。不多说，直接上题：第一题 [1, 2, 3].map(parseInt) 不要被套路，这...

whatsns 2019-08-21 15:26 评论0 收藏0
你们真的了解闭包吗？

摘要：前言我们知道所谓的闭包指的就是有权访问另一个函数作用域的变量对象的函数，但是你们真的了解的闭包吗就当你们很了解了，毕竟是基础知识，我就简单说说概念简单几行代码，先说说作用域链的流程，运行到时，会将作用域链保存到中执行到时会创建执行环境，并将前言我们知道所谓的闭包指的就是有权访问另一个函数作用域的变量对象的函数，但是你们真的了解JS的闭包吗？就当你们很了解了，毕竟是基础知识，我就简单...

bigdevil_s 2019-08-23 10:56 评论0 收藏0
你真的会用 Babel 吗?

摘要：安装然后在的配置文件加入入口文件引入这样就可以啦，还是可以减少很多代码量的。是参数，等同于执行正常。这个包很简单，就是引用了和，然后生产环境把它们编译到目录下，做了映射，供使用。引入这个问题是对自己的发问，但我相信会有很多跟我一样的同学。对于 babel 的使用，近半年来一直停留在与 webpack 结合使用，以及在浏览器开发环境下。导致很多 babel 的包，我都不清楚他们是干嘛...

mochixuan 2019-08-22 11:06 评论0 收藏0
前端er，你真的会用 async 吗？

摘要：异步函数是值通过事件循环异步执行的函数，它会通过一个隐式的返回其结果。 async 异步函数不完全使用攻略前言现在已经到 8012 年的尾声了，前端各方面的技术发展也层出不穷，VueConf TO 2018 大会也发布了 Vue 3.0的计划。而在我们（我）的日常中也经常用 Vue 来编写一些项目。那么，就少不了 ES6 的登场了。那么话说回来，你真的会用 ES6 的 asyn...

Jaden 2019-08-23 13:50 评论0 收藏0