【精选】F12

2023-10-30 03:44| 来源: 网络整理| 查看: 265

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

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

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)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca9ef56e3f6549628dbc8bf266e2f5ce~tplv-k3u1fbpfcp-watermark.image?)]

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