持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

前言

不知大家对chrome的开发者工具使用的熟练度如何？是否是和我一样只停留在查看输出，查看错误，打断点等一些基础操作上。每次看别人使用和自己使用总感觉是两种工具。所以，今天，就扒一扒chrome 开发者工具的一些操作，让我们的开发效率提起来。

console 面板

console面板, 又称控制台, 用于打印应用信息和输入需要被执行的代码。整个console面板大概分为以下这几个部分，大家这块应该也都熟悉，毕竟接触的最多的可能就是console面板了。

下面我们来看一下console api

console api

console.assert(expression,object)

当 expression 的结果为true的时候，控制台无显示；当满足expression表达式满足false条件的时候，该消息以及堆栈跟踪被写入控制台。

console.assert(1 > 1, "false");
// Assertion failed: false
console.assert(1 > 0, "false");
// undefined

console.clear()

清除控制台信息，如果setting(设置)中"Preserve Logs"(保持日志)是打开状态时，console.clear()失效

console.count(label)

打印出这个方法被执行的次数。在调试js执行的时候挺有帮助,可以结合console.time(label) console.timeEnd(label)结合，看某函数执行的次数及每次执行所耗的时间。

function showCount(){
    console.count("call");
}
showCount();   // call: 1
showCount();   // call: 2
showCount();   // call: 3

console.dir(object)

打印指定对象的JSON表示形式。这个方法比较实用，可以将DOM元素转为 js 对象打印，增强可读性。

console.countReset([label])

重置计数

console.count();  // default: 1
console.count('coffee');  // coffee: 1
console.count('coffee');  // coffee: 2
console.count();  // default: 2


// 重置上面代码的打印结果
console.countReset();
console.countReset('coffee');
console.count();  // default: 1
console.count('coffee');  // coffee: 1

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

根据可选的标题产生一个新的日志列表，之后直至console.groupEnd()之前的控制台输出信息都会列在这个日志组中，如果没使用console.groupEnd()进行闭合，则之后的输出将都包括在这个日志组中。

console.group("g");
console.log(1);
console.dir(document.body);
console.groupEnd("g");
console.log(2);
/*
g
|-- 1
|-- DOM对象(body)
-
2
*/

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

和console.group(object[,object,...])使用方式相同，不同的是console.group(object[,object,...])打印的日志组的状态是打开的，而console.groupCollapsed(object[, object, ...])打印的是闭合的日志组。

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

在控制台打印信息。你可以在这个方法中传入一个或多个对象，每个对象会通过计算后加入一串使用空格分隔的字符串。传入的第一个参数可能会包含格式说明符号，该说明符号由一个百分号(%)后加一个代表需要被替换内容的字母。

%s 字符串
%d or %i 整数
%f 浮点数
%o 可扩展DOM元素(在element面板一样)
%O 可扩展javascript元素
%c 根据提供的css样式输出字符串

感觉都不认识log了，hh。

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

以报错的格式打印信息，并且在调用列出产生堆栈跟踪。

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

以信息的格式打印信息。

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

以警告的格式打印信息。

console.time(label)

开始一个新的带有标签的计时器。在之后的代码中调用console.timeEnd(label)时，停止计时并且将所耗时间间打印在控制台。注意：timeEnd的label需要和time的label对应上才算闭合这个计时。


console.time("Array initialize");
let arr = new Array(100),
      len = arr.length,
      i;
for (i = 0; i < len; i++) {
  arr[i] = new Object();
};
console.timeEnd("Array initialize");   // 输出: Array initialize: xxxms

console.trace()

显示当前所执行到的代码处的堆栈跟踪信息。写基础库和组件的时候经常用。

console.table(array[object])

将数组数据(数组元素为对象)以table布局展示。

const data = [
  {id:1, value:"a"},
  {id:2, value:"b"},
  {id:3, value:"c"},
  {id:4, value:"d"},
  {id:5, value:"e"},
  {id:6, value:"f"}
];
console.table(data);

$相关

以下api基于该代码片段：

<div id="nav" index="0"></div>
<div class="nav" index="1"></div>
<div class="nav" index="2"></div>
<div class="nav" index="3"></div>
<script>
  const obj = {value:1};
</script>

$()

返回符合css选择器条件的第一个元素，是 document.querySelector() 的简写。

$('#nav')
// <div id="nav" index="0"></div>(html元素)
$('.nav')
// <div class="nav" index="1"></div>(html元素) 注意:这里取的是class含有nav样式的元素列表中的第一个元素

$$()

返回符合css选择器条件的所有元素组成的数组，是 document.querySelectorAll() 的封装。

$$('.nav')
// [<div class="nav" index="1"></div>,<div class="nav" index="2"></div>,<div class="nav" index="3"></div>]

$_

返回最近一次计算得出的值，默认undefined。

1+2
// 3
$_
// 3
$$('.nav')
// [<div class="nav" index="1"></div>,<div class="nav" index="2"></div>,<div class="nav" index="3"></div>]
$_
// [<div class="nav" index="1"></div>,<div class="nav" index="2"></div>,<div class="nav" index="3"></div>]
$_.length
// 3

$01234

返回最近5次选中的元素。

$0 最近的第一次
$1 最近的第二次
$2 最近的第三次
$3 最近的第四次
$4 最近的第五次

一些其他API

inspect()

inspect()函数需要传入一个DOM元素或者javascript引用，如果传入的是DOM元素，开发者工具会跳到Elements面板，并且展示对应的元素；如果传入的是javascript引用，开发者工具跳到Profile面板或者控制台显示堆栈信息。

inspect($('#nav'));

该操作会跳转至 Elements 面板并选中对应的DOM元素。

getEventListeners(object)

返回指定对象上绑定的事件。

copy(object)

将指定对象的字符串表示形式复制到剪贴板。

monitor(function)

监听指定函数的执行。调用指定的函数时，将消息记录到控制台，该消息指示出函数名以及调用函数时传递给函数的参数。


function sum(x, y) {
    return x + y;
}
monitor(sum);

sum(1,2) // info: function sum called with arguments: 1, 2  output: 3

monitorEvents(object[, events])

监听指定对象上发生的指定事件。事件发生时，事件对象将记录到控制台。

monitorEvents(window, "resize");

总结

关于console面板的分享就这么多，对我来说，确实好多都没用过。下次分享elements面板，bye～

chrome devtools的使用——console面板

前言