你真的了解console吗？（确定不进来看看）

machinist_wq
2,649 阅读7分钟

对于console你的印象是什么呢？ 是console.log();还是浏览器上的控制台？今天就来说说你可能不了解的console；

写在前面

浏览器的控制台可以说是前端程序猿最常用的东西了，一般都是配合console.log()，一起使用，其实console不止可以.log,今天就来说说console的其他用法，要觉得小弟收集总结的还可以的话，辛苦给个赞，要是觉得那里写的有什么问题的话，请在下面给个评论，一起进步！o(*≧▽≦)ツ

总况

打开编译器打上console.,利用自动补全功能我们可以看到console是有很多方法的；

总结下目前控制台方法和属性有：

["?", "$x", "dir", "dirxml","keys","values","profile","profileEnd","monitorEvents", "unmonitorEvents","inspect","copy","clear","getEventListeners","undebug","monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "4", "_"]

下面我们来一一介绍一下各个方法主要的用途。

一般情况下我们用来输入信息的方法主要是用到如下四个：

console.log

这个可以说是用的最多的了，主要用途是在浏览器控制台输出我们想要输出的信息。

console.info

用于输出错误信息，用法和console.log()一致。

刚瞌睡就来了枕头！ 打开咱们掘金网页的控制台看下！

掘金网页的控制台
类似的还有百度，打开以后是招聘信息。

console.warn

用于输出警示信息，用法和console.log()一致。

console.error

用于输出错误信息，用法和console.log()一致。

console.debug

用于输出调试信息，用法和console.log()一致。

为什么都是输出信息却要分好几个呢？看出图说话。

这是一张IE上截取的图片，在Chrome上不同的信息会分配到不同的位置，不好截图！（万恶的IE还是有那么一点用处的哈，哈哈）。

console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符a（%s）、整数（%d或%i）、浮点数（%f)和对象（%o）四种。

格式化符号 实现的功能
%s 格式化成字符串输出
%d or %i 格式化成数值输出
%f 格式化成浮点数输出
%o 转化成展开的DOM元素输出
%O 转化成JavaScript对象输出
%c 把字符串按照你提供的样式格式化后输入

看个栗子：

printf风格

%o占位符，可以用来查看一个对象内部情况（Chrome无效）；

var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);

看一个对象内部情况

注意：收集资料的时候看到一些可以用console.log在控制台输出带样式的文字或者图片，个人觉得用处不大，这里就直接忽略了，有兴趣的朋友可以自己查一下！

console.dirxml

用来显示网页的某个节点（node）所包含的html/xml代码。

<body>
    <table id="mytable">
        <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>aaa</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>111</td>
            <td>333</td>
            <td>222</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var mytable = document.getElementById('mytable');
        console.dirxml(mytable);
    }
</script>

console.dirxml

console.group和console.groupEnd

用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开。

好玩不？ 可惜到现在我都没觉得他有啥用。

开玩笑的，存在即合理怎么会没用呢！ヾ(≧O≦)〃嗷~

在查看别人代码的时候一打开控制台全都是输出的时候这东西就有用了！

console.groupCollapsed

与console.group方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。

console.assert

对输入的表达式进行断言，接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。

假如在代码中，我们需要满足条件才输出，是不是会经常这样写：

var isShow = false;
if (!isShow) {
    console.log('为false时输出信息');
}

现在一个console就给你解决了；

是不是很方便！（鄙人觉得是）

console.count

输出 count() 被调用的次数。此函数接受一个可选参数label。如果有label，此函数输出为那个指定的 label 和 count() 被调用的次数。如果 label 被忽略，此函数输出count() 在其所处位置上被调用的次数。（这个方法非常实用哦）！

该特性是非标准的，请尽量不要在生产环境中使用它！ 

var user = "";

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

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");

// "bob: 1"
// "alice: 1"
// "alice: 2"
// "alice: 3"

console.countReset

重置计数器。此函数接受可选的参数标签。一个字符串， 若传入此参数 countReset() 重置此label的count为0。若忽略此参数 countReset() 重置count()默认的 default 字段的count为0；

// 不传参
var user = "";

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

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
console.countReset();

// "default: 1"
// "default: 2"
// "default: 3"
// "default: 1"
// "default: 0"
// 可以看到 调用 console.counterReset() 重置了default 的计数为0

// 传参
var user = "";

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

user = "bob";
greet();
user = "alice";
greet();
greet();
console.countReset("bob");
console.count("alice");

// "bob: 1"
// "alice: 1"
// "alice: 2"
// "bob: 0"
// "alice: 3"
// 调用countReset("bod")只是重置了 "bob" 的计数器值  而 "alice" 的计数器值没有改变。

console.table

对于某些复合类型的数据，console.table方法可以将其转为表格显示。

var languages = [
  { name: "JavaScript", fileExtension: ".js" },
  { name: "TypeScript", fileExtension: ".ts" },
  { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.table(languages);

上面代码的language，转为表格显示如下。

表格

复合型数据转为表格显示的条件是，必须拥有主键。对于上面的数组来说，主键就是数字键。对于对象来说，主键就是它的最外层键。

var languages = {
  csharp: { name: "C#", paradigm: "object-oriented" },
  fsharp: { name: "F#", paradigm: "functional" }
};

console.table(languages);

上面代码的language，转为表格显示如下。

表格

console.dir

dir方法用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。

该方法对于输出DOM对象非常有用，因为会显示DOM对象的所有属性。

console.dir(document.body);

Chrome上我试验了下感觉和log没区别IE上也是!(不知道什么鬼。 ╮（╯＿╰）╭)。当然了我没去实验DOM对象。哈哈~！

console.time和console.timeEnd

这两个方法用于计时，可以算出一个操作所花费的准确时间。

console.time("Array initialize");

var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};

console.timeEnd("Array initialize");

// Array initialize: 1914.481ms

console.timeLog;

在控制台输出计时器的值，该计时器必须已经通过 console.time() 启动。

如果没有传入 label 参数，则以 default: 作为引导返回数据：

default: 1042ms

如果传入了一个已经存在的 label ，则会以 label: 作为引导返回数据：

label: 1242ms

栗子：

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");
// 上例中的输出分别显示了用户从打开页面到关闭第一个 alert 和第二个 alert 框的时间间隔：

注意：使用 timelog() 输出计时器的值会显示计时器名称。使用 timeEnd() 停止也会显示计时器名称和输出计时器的值，并且，最后的 " - timer ended" 可以清楚的显示计时器不再计时的信息。

console.profile和console.profileEnd

console.profile方法用来新建一个性能测试器（profile），它的参数是性能测试器的名字。

该特性是非标准的，请尽量不要在生产环境中使用它！ 

console.profile('p')
// Profile 'p' started.

console.profileEnd方法用来结束正在运行的性能测试器。

console.profileEnd()
// Profile 'p' finished.

console.timeStamp

该特性是非标准的，请尽量不要在生产环境中使用它！

向浏览器的 Performance或者Waterfall工具添加一个标记。这样可以让你将代码中的一个点和其他在时间轴上已记录的事件相关联，例如布局事件和绘制事件等。

你可以选择用一个参数来作为时间戳标签，然后标记旁边就会显示这个标签。

console.trace

堆栈跟踪相关的调试，console.trace方法显示当前执行的代码在堆栈中的调用路径。

上述方法只是我个人理解罢了。如果想查看具体API

console.clear

用于清除当前控制台的所有输出，将光标回置到第一行。

avatar
文章
阅读
粉丝
相关推荐
带css样式的console.log() ，进来了解一下
7.9k阅读
 · 
84点赞

友情链接：