前言

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选项卡,它就会显示对应节点上的全部事件信息.
在这里插入图片描述


总结

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

更多推荐