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选项卡,它就会显示对应节点上的全部事件信息.
总结
后续将会讲解更多的面板使用方法,感兴趣的同学请留言和私信