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

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

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

③ 调整当前控制台执行上下文，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输出。

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

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