Chrome控制台骚操作，知道这些事半功倍

ConardLi

发布于 2019-09-08 14:45:24

1.5K0

发布于 2019-09-08 14:45:24

文章被收录于专栏：code秘密花园

Chrome 浏览器想必是每个前端工程师必备的利器之一，速度快、体积小、支持的特性也比其他浏览器多；除此之外，它还拥有强大的控制台功能，但很多开发者并没有用出控制台的精髓，只是使用 console.log();，其实控制台的功能远不止那么简单。

console

既然 console 能打印出我们想要的信息，那么就试着打印下它自己。

console.log(console);

可见，console 也是一个对象，而且除了常用的 log() 方法外，还有很多实用的方法。那么一起来看看它们有多实用。

assert()

console.assert(); 用于判断表达式，满足表达式时才输出语句。

当你想代码在满足某些条件时才在控制台输出信息，那么大可不必用 if 或者三元表达式来实现，console.assert(); 就是这样场景下的好方法，它会先对传入的表达式进行断言，表达式为 true 时不会输出信息，只有表达式为 false 时才会在控制台输出 error 信息。

var isTrue = false;
console.assert(isTrue, "条件不满足！");

clear()

console.clear(); 用于清空控制台。

当然，也可以用以下方式：

直接在控制台输入 clear()
直接用快捷键 ctrl+l(Win)、cmd+k(Mac)

count()

console.count(); 用于记录代码执行的次数。

当想要知道某一段代码被执行了多少次，不用自己去写相关的逻辑，内置的 console.count(); 完全可以胜任这项任务。

function fun() {
    // 函数体
    console.count("fun 被执行次数");
}
fun();
fun();
fun();

debug()、log()、info()、warn()、error()

console.debug(); 用于输出调试的信息。 console.log(); 用于输出一般的信息。 console.info(); 用于输出提示的信息。 console.warn(); 用于输出警示的信息。 console.error(); 用于输出错误的信息。

console.debug("调试的信息");
console.log("一般的信息");
console.info("提示的信息");
console.warn("警示的信息");
console.error("错误的信息");

大家都会用 log()，但很少有人能够很好地利用 warn，error 等将输出到控制台的信息进行分类整理。他们功能区别不大，意义在于将输出到控制台的信息进行归类，或者说让它们更语义化。

另外，console.log(); 可以接收多个参数，参数间用逗号分隔，控制台会根据参数的设置把多个消息打印到同一行。

如果 log() 里第一个参数是带有特殊标识符的字符串的话，控制台会根据不同的标识符来把后面的参数填充到前面的字符串中去。常见的标识符有：

%s 表示输出字符串。 %d 表示输出数字（也可以用 %i）。 %f 表示输出浮点数值。 %o 表示输出 DOM 元素。 %O 表示输出 JavaScript 对象。 %c 表示对输出的文字应用特殊的样式。

var a = 123;
var b = [456, "789", true];
var c = function() {
    name : "张三";
    age : 20;
    sex : "男"
}
console.log(a, b, c);

console.log("今天%s星期%d", "是", 6);
console.log("%o", document.body);
console.log("%O", document.body);

最特别的还是 %c 的用法，可以让控制台输出由你定制样式的内容。例如这样：

console.log("%cFrom CMF:", "color: yellow; background: red; font-size: 20px; border-radius: 5px", "Hello World!");

还有这样酷炫的：

console.log("%chello world","background-image:-webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); color:transparent; -webkit-background-clip: text; font-size:5em;");

可以看出 %c 应用的样式是 CSS 的语法，所以 CSS 支持的样式语句基本上都可以支持。

添加了样式的输出语句貌似看起来没啥用，但是当多人分模块开发一个大型的项目的时候，控制台输出一大堆信息，肯定没办法一下子找到属于自己模块的信息。要是你给自己的模块输出语句添加了具有特色的样式，那么就能较快地定位，这也是提高效率的一个小技巧。

dir()

console.dir(); 用于展开输出一个 DOM 元素的 JavaScript 对象。

区别：console.dir(); 是将 DOM 结点以 JavaScript 对象的形式输出到控制台，而 console.log(); 是直接将 DOM 结点以 DOM 树的结构进行输出，与在元素审查时看到的结构是一致的。

console.log(document.body);
console.dir(document.body);

同样，它们也可以以不同的形式打印函数。

function People () {
    name : "张三";
    age : 20;
    sex : "男"
}
console.dir(People);
console.log(People);

dirxml()

console.dirxml(); 用于查看页面中某个节点的 html/xml 代码。

<div id="div">
    <p>我在div里面呢</p>
</div>

var div = document.getElementById("div");
console.dirxml(div);
console.log(div);

效果跟 console.log(); 是一样的。

group() & groupEnd()

console.group(); 和 console.groupEnd(); 配合使用，用于将各自的信息分组到以各自命名空间为名称的组里面。

console.group("module_1");
console.log("来自 module_1 的普通信息");
console.info("来自 module_1 的提示信息");
console.groupEnd();

console.group("module_2");
console.warn("来自 module_2 的警示信息");
console.error("来自 module_2 的错误信息");
console.groupEnd();

这样的控制台信息看上去就一目了然，再也不用为了找这是属于哪一个模块输出的而翻源码。

如果想要输出为折叠模式，可以使用 console.groupCollapsed();，用法和 console.group(); 类似。

console.groupCollapsed("module_1");
console.log("来自 module_1 的普通信息");
console.info("来自 module_1 的提示信息");
console.groupEnd();

console.groupCollapsed("module_2");
console.warn("来自 module_2 的警示信息");
console.error("来自 module_2 的错误信息");
console.groupEnd();

table()

console.table(); 用于以表格的形式输出信息。

有的时候后端传回来一大串数据，如果直接 console.log(); 或是通过抓包工具来查看，肯定会让你晕头转向，这个时候 console.table(); 可以发挥作用了，以表格的形式呈现数据，自然一目了然。

而且点击表头还可以对数据进行排序。

var data = {
    num : 30,
    students : [
        {
            name : "张三",
            age : 20,
            sex : "男",
            hobby : "打篮球"
        },
        {
            name : "李四",
            age : 21,
            hobby : "打游戏",
            sex : "男"
        },
        {
            name : "王五",
            sex : "女",
            age : 18
        }
    ]
};
console.table(data.students);

time() & timeEnd()

console.time(); 和 console.timeEnd(); 配合使用，用于记录代码运行所消耗的时间。

输出一些调试信息只是控制台最常用而且最基本的功能。当做一些性能测试时，同样可以在这里很方便地进行。比如需要考量一段代码执行的耗时情况时。

console.time("for 循环耗时");
for (var i = 0; i < 10000000; i++) {
    // 循环体
}
console.timeEnd("for 循环耗时");

一些其他指令

$_

表示上一次在控制台键入的命令，也可以用快捷键 ↑ 来达到同样的效果

2 + 2    // 回车
$_+1    // 再回车得5

`$0` ~ `$4`

可以在控制台输出在 Elements 面板选中的页面元素。 $0~$4 代表最近 5 个你选择过的 DOM 节点。

什么意思呢？在页面右击选择审查元素，然后在弹出来的 DOM 节点树上面随便点选，这些被点过的节点会被记录下来，而 $0 会返回最近一次选的 DOM 节点，以此类推，$1 返回的是上上次选的 DOM 节点，最多保存 5 个，如果不够 5 个，则返回 undefined。

另外值得一赞的是，Chrome 控制台中原生支持类 jQuery 的选择器，也就是说你可以用 $ 加上熟悉的 css 选择器来选择 DOM 节点。

<div id="div1">
    <p>我在div1里面呢</p>
</div>
<div id="div2">
    <p>我在div2里面呢</p>
</div>

$("div");
$$("div");

$(selector) 返回的是满足选择条件的首个 DOM 元素，其实就是 document.querySelector() 的封装。 $$(selector) 返回的是满足选择条件的所有元素的一个集合(数组)，是对 document.querySelectorAll() 的封装。

keys() & values()

这是一对基友。

keys(); 返回传入对象所有属性名组成的数组。 values(); 返回传入对象所有属性值组成的数组。

具体请看下面的例子：

var people = {
    name : "张三",
    sex : "男",
    age : 20,
    hobby : "打篮球"
};
keys(people);
values(people);

monitor() & unmonitor()

monitor(function); 接收一个函数名作为参数，比如 function sayHello，每次 sayHello 被执行了，都会在控制台输出一条信息，里面包含了函数的名称 sayHello 及执行时所传入的参数。而 unmonitor(function); 则是用来停止这一监听。

function sayHello(name) {
    alert("Hello," + name);
}
monitor(sayHello);
sayHello("CMF");
sayHello("HTML5");
unmonitor(sayHello);

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-11-03，如有侵权请联系 cloudcommunity@tencent.com 删除

xml

javascript

本文分享自 code秘密花园微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

xml

javascript

登录后参与评论

0 条评论

热度