Chrome开发者工具详解 （二）

---

前言

Console面板是与网页进行交互的控制台窗口，它用于DOM树对象信息和调试代码，掌握Console的使用方法将会大大提高爬虫开发效率和反爬分析。

---

一、Console面板

定位面页节点

（1）$0 ：对当前Elements面板中选中的节点进行引用。
（2）$1 ：对上一次选中的节点进行引用
（3）$2 ：对上上次选中的节点进行引用

示例：

打开博客，选中Element中个人简介的对应节点，然后打开Console面板属于对应的方法引用节点：

Css选择器进行节点定位

除了上述方法进行节点定位引用外，还可以通过css选择器进行节点定位：

(1) document.querySelector() 或者 $()方法: 通过css选择器语法定位节点。
(2) document.querySelectorAll()或者 $ $()方法: 通过css选择器语法定位节点。

事件监听

（1）monitorEvent():监听目标事件信息

只要没有取消对目标节点的监听，每次在网页上进行交互时，都能控制台上输出监听信息。

（2）unmonitorEvent():停止监听

取消目标节点的监听事件，参数是监听节点，如：

（3）getEventListeners(): 获取DOM节点的监听器

参数为网站节点；获取节点上的监听事件，返回数组对象。

示例：

监听博客上文章点击跳转事件：

监听博客上文章中的点赞按钮的事件信息：

二、查看节点上注册的监听器

除了console对节点进行引用，以此监听节点上的事件外，还可以通过Elements面板中的节点信息查看节点上绑定注册的监听器。

示例:

打开Elements面板，查看Event Listeners选项卡，它就会显示对应节点上的全部事件信息.

---

总结

后续将会讲解更多的面板使用方法，感兴趣的同学请留言和私信