你可能还不知道却很经常使用的console方法

时间 2020-04-20

标签可能还不知道经常使用 console 方法繁體版

原文原文链接

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

写在前面

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

总况

打开编译器打上console.,利用自动补全功能咱们能够看到console是有不少方法的；html

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

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

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

通常状况下咱们用来输入信息的方法主要是用到以下四个：chrome

console.log

这个能够说是用的最多的了，主要用途是在浏览器控制台输出咱们想要输出的信息。api

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	把字符串按照你提供的样式格式化后输入

看个栗子：

%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.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

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

console.timeLine和console.timeLineEnd

配合一块儿记录一段时间轴(MDN上没有看到这一方法了)