开发不使用控制台 | 代码没几行跑起来

console可以做的事

我们在开发的过程中，无论书写什么样的代码，构建什么样的项目，调试程序都是不可或缺的一步，如果能熟悉控制台提供的这些功能，并掌握一些操作的小技巧，那么将会极大的提高我们创作的质量与效率。

1.使用console打印出需要的信息assert：对一个表达式进行断言，接收两个参数，如果第一个参数为真值(即truthy)，那么什么都不做，如果第一个参数为假值(即falsy)，那么输出第二个参数的值。(tips:输出的undefined为表达式的返回值，并不属于assert语句输出的一部分，下同。)

assert

clear：清空控制台。(tips:如果在设置中选择保留日志，那么此语句将不会生效。)

clear

保留日志

context：会返回一个新的Context类型对象，与console中的方法完全一致，但是每次执行后返回的对象都不相同，无论将console中的任意方法如何改写，Context对象中的方法执行都会保持默认的原始行为。

独立的对象与方法

重写log仍能保持原始输出

重写log仍能保持原始行为

重写的log仍然符合预期

count：记录该行代码被执行的次数，可以传入一个参数作为标签使用。(tips:相同标签共享数值，不同标签独立计算，不设定标签即默认为相同标签。)

多次独立执行会累加计算

不同标签独立计算

相同标签共享数值

countReset：重置指定标签名的计数器，如果不传参数，则只重置默认计数器。

只能重置相同标签的计数器

debug：在控制台输出信息，同log。dir：在控制台输出信息，同log。会显示出值的类型。dirxml：与直接在控制台输入值按回车效果相同。error：在控制台输出信息，同log。会以错误信息的形式展示。group：将输出的信息分组的开始标识。groupCollapsed：同group，默认为折叠收起的状态。groupEnd：分组的结束标识。

默认展开的分组

info：在控制台输出信息，同log。log：在控制台输出信息，可以使用占位符，可以输出图片，并允许设置输出信息的样式。(tips:%s用来占位字符，%d或%i用来占位整数，%f用来占位浮点数，%o用来占位对象，%c占位css格式的字符串。)

可以设置任意的css样式

memory：展示内存堆栈使用信息profile：对一段代码的执行生成性能分析报告，作为开始标识。profileEnd：结束标识，可以传入一个对应的参数作为标签来对生成的报告进行命名。

对执行代码生成报告

报告的图表展示

table：以表格的形式输出信息，行为索引，列为值。(tips:主要针对Object和Array，以及它们的嵌套形式，对于基本类型变量输出同log，对于函数则原样输出。)

打印数组和对象

time：计时器的开始标识，可以传入一个参数作为标签使用。timeEnd：计时器的结束标识。

对代码执行耗时进行统计

timeLog：在一次计时器结束之前，可反复打印执行时间。，一旦调用timeEnd，那么该标签的计时器将不可用。

多次打印代码执行时长

timeStamp：可以在性能面板中插入一个标记，第一个参数即可用来为这个标记进行命名，会在当前时间戳节点上显示在调试面板中。

在代码中的合适位置打上标记

时间线面板上显示执行时机

trace：会显示出当前位置执行的代码在执行堆栈中的调用路径，可以传入一个或多个参数来作为标签，标记为记录的名称。

代码执行堆栈记录

warn：在控制台输出信息，同log。会以提醒信息的形式展示。2.控制台的面板操作

控制台操作面板

顶部功能区域从左至右：

① 展开或收起信息类型提示。

② 清空控制台。

③ 调整当前控制台执行上下文，top即为当前顶层主页面，可切换到其他iframe子页面或扩展程序中注册到当前页面的作用域范围。

切换作用域

④ 添加实时执行表达式，可创建多个，能够实时计算出表达式的值，非常方便调试。

实时计算表达式的值

⑤ 通过关键字过滤控制台输出的内容。

⑥ 选择输出的信息级别。

⑦ 发现的问题数，以及不同分类中各自的数量。

⑧ 设置控制台的一些基础行为，勾选保留日志，则在刷新页面时不会清空控制台之前输出的数据。勾选仅限已选择的上下文，则会根据②中选择的作用域来展示相应的内容。

3.控制台中常用的指令

$：相当于document.querySelector，可以使用css选择器来获取查找到的一个元素。

选择一个元素

$$：相当于document.querySelectorAll，可以使用css选择器来获取查找到的元素集合。

选择元素集合

$_：代表控制台输出执行的最后一个表达式的返回值。

直接取得上一次返回值

$0-$4：代表在element面板中选中的元素，$0代表最新，$1代表次新，以此类推。

$x：可以传入一个XPath路径作为参数，获取匹配到的元素集合。

获取元素集合

copy：将传入的参数内容复制到剪切板，可以在其他地方粘贴使用。。

monitor：可以传入一个函数，来监听函数的执行。当该函数被执行时，将被告知。

unmonitor：取消对函数的监听。

监听函数执行

monitorEvents：可以对某个元素监听一个事件或行为的发生，支持多个同时监听，传递为数组格式即可。

监听点击行为的触发

unmonitorEvents：取消监听。

额外说明

在代码中输出的引用类型变量，查看控制台的时候可能较当时输出的值有发生变化。如：a是一个空数组，先输出，然后给予赋值操作，这时候展开看到的是最新的值。一旦展开，后续的更新操作将不会再展现。

引用类型会在第一次展开时重新计算

元素如果被设置了id或者name，那么window中就会自动生成同名属性，指向该元素，前提是没有人为定义过该名称的变量。

当输出一个元素，控制台中显示为xml形式，我们却想要查看属性的时候，可以把该元素放在数组中或者使用dir输出。

将xml形式转化为对象查看

总的来说

控制台面板提供了非常多的便利性功能，有助于我们日常开发调试。技能点的掌握不在多少，要善于利用才行，有一些是相辅相成的，熟练运用之后，能够帮助我们快速的定位问题并解决问题。

希望我们以后能把更多的时间用在创造成果上面，而不是寻找问题上面。