F12

F12

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

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

1.使用console打印出需要的信息

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

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

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

• 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格式的字符串。)

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

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

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

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

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

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

• warn：在控制台输出信息，同log。会以提醒信息的形式展示。

2.控制台的面板操作

顶部功能区域从左至右：

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

② 清空控制台。

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

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

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

⑥ 选择输出的信息级别。

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

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

3.控制台中常用的指令

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KHnbR5Iq-1655290059884)(.image?)]

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

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

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

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

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

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

unmonitor：取消对函数的监听。

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

unmonitorEvents：取消监听。

额外说明

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

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

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

总的来说

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

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