Chrome DevTools Protocol 入门:相关概念

前言

在上篇文章中,我们快速地使用了 Chrome DevTools Protocol(CDP)发送指令,成功实现了一些浏览器自动化操作。然而,要想深入使用 CDP,还需要对其中的 协议概念 有更深入的理解。这些概念不仅是我们与浏览器交互的基础,还决定了我们如何构建更复杂、更灵活的调试和自动化操作。为了让这些概念更容易理解,我们将在这里通过实例化的方式,打一些比方,让抽象的概念变得更加具象化。


1. 域(Domain) —— 功能模块的“房间”

想象一下,Chrome DevTools Protocol 是一栋大房子,而这栋房子有很多房间,每个房间都有不同的功能区域。每个房间就是一个 域(Domain)。比如:

  • Page 就像一个专门用于管理页面导航、截图、事件的房间。
  • Network 房间负责监控和处理所有的网络请求,像是管家在查看有哪些资源进出。
  • DOM 房间则是维护和操作网页的 DOM 树结构,类似一个园丁在修剪和修改网页中的元素。

这些“房间”之间是相互独立的,你需要去到不同的房间(域)才能执行特定的操作。比如你要修改页面的样式,就得进入 CSS 这个房间;而如果你想调试 JavaScript,则需要进入 Debugger 房间。

每个房间中有不同的 方法事件,这正是你可以利用的“工具”和“提醒”。


2. 方法(Method) —— 房间中的“操作工具”

在每个“房间”中,我们有各种工具来完成不同的操作。这些工具就是 CDP 中的 方法(Method)。可以把方法想象成每个房间里的“按钮”,按下不同的按钮,就会触发不同的行为:

  • Page 房间中,按下 Page.navigate 按钮,就会让页面导航到指定的 URL,好像打开了一扇新的门,进入了另一个房间。
  • Runtime 房间中,按下 Runtime.evaluate 按钮,就像在房间里执行一段代码,告诉房间该做什么事情。

每个方法通常需要一些 输入参数,这些参数就像是操作工具时所需的说明书。如果你要导航页面,你得告诉 Page.navigate 按钮:“我要去的目标 URL 是什么”。同样,工具执行后通常也会给你一个 返回值,告诉你执行的结果如何,比如页面是否成功导航。

类比:

想象你进入一个 Page 房间,看到墙上有个大按钮,上面写着“导航”。你输入目标地址按下按钮(调用方法时传递参数),浏览器就会载入该页面,并告诉你“页面已经打开”(返回结果)。


3. 事件(Event) —— 自动弹出的“提醒信号”

在每个房间里,不仅有工具可以操作,有时候你会收到一些 提醒信号(事件),告诉你房间里发生了什么变化。这些 事件(Event) 是浏览器主动发出的消息,类似房间中突然响起的警报,告诉你某件事情发生了。

  • 比如在 Page 房间中,当页面加载完成时,系统会自动发出 Page.loadEventFired 事件,就像一个完成通知,提醒你“页面加载已经完成”。
  • Network 房间中,当网络请求发出时,浏览器会发出 Network.requestWillBeSent 事件,提醒你“有一个网络请求刚刚发送”。

事件是被动的,你并不需要主动按下什么按钮或发出请求来获取它们。你只需要订阅这些事件,当事件触发时,浏览器会自动通知你。你就像在房间里安装了监控设备,房间发生了某些事情,它会立刻通知你。

类比:

想象你正在 Network 房间里走动,突然一盏红灯闪烁起来,显示“有新的请求正在发送”(Network.requestWillBeSent 事件)。你可以根据这个提示决定接下来要做的操作,比如拦截或查看这个请求。


4. 类型(Type) —— 方法和事件的“数据结构”

无论是方法的输入参数还是事件的输出结果,所有的数据都需要以某种结构表示出来。这些数据结构就是 类型(Type)。可以把 类型 看作是传递消息时使用的“容器”或“数据模型”。

  • 比如在 DOM 房间里,你可以拿到一个 DOM.Node 类型的对象,这个对象就像一个树形图,里面包含了节点的详细信息,如节点的 ID、名称和子节点数量。
  • Network 房间里,事件返回的 Network.Request 对象包含请求的详细信息,比如 URL、请求头等。

类型 保证了数据的结构化,让浏览器和客户端之间的数据交互更加清晰和有序。你可以理解为,房间里的“工具”所接收的指令(参数)和它们返回的结果都装在特定形状的盒子(类型)里,盒子的结构要符合工具的预期。

类比:

比如,你需要给 Runtime.evaluate 方法传递一段 JavaScript 代码,代码这个数据需要装在一个特定的“盒子”里,这个盒子就是 expression 类型的参数。返回结果时,浏览器会给你另一个特定的“盒子”,里面是执行后的结果数据,比如它的值和类型。


实例:通过 CDP 控制页面的导航与监控

下面是一个使用 Pythonwebsockets 库的示例,展示如何通过 Chrome DevTools Protocol (CDP) 使用 WebSocket 连接控制页面导航并监控事件。我们将实现以下功能:

  1. 通过 WebSocket 连接到 Chrome DevTools Protocol。
  2. 使用 Page.navigate 指令导航到指定页面。
  3. 订阅 Page.loadEventFired 事件,监控页面加载完成。
  4. 订阅 Network.requestWillBeSent 事件,监控页面发出的网络请求。

环境准备

首先,确保你已经安装了 websockets 库:

pip install websockets

示例代码

import asyncio
import websockets
import json# Chrome DevTools Protocol WebSocket URL (replace with actual URL from http://localhost:9222/json/qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq)
ws_url = 'ws://localhost:9222/devtools/page/{your-page-id}'# Message ID counter
message_id = 0# Function to send messages over WebSocket
async def send_message(ws, method, params=None):global message_idmessage_id += 1message = {'id': message_id,'method': method,}if params:message['params'] = paramsawait ws.send(json.dumps(message))print(f"Sent: {message}")# Function to navigate to a page
async def navigate_to_page(ws, url):await send_message(ws, 'Page.navigate', {'url': url})# Function to enable domains like Page and Network
async def enable_domains(ws):await send_message(ws, 'Page.enable')await send_message(ws, 'Network.enable')# Function to handle received messages
async def handle_message(message):data = json.loads(message)# Page load event firedif data.get('method') == 'Page.loadEventFired':print("Page has finished loading.")# Network request sentif data.get('method') == 'Network.requestWillBeSent':request = data['params']['request']print(f"Network request sent: {request['url']}")# Main function to run WebSocket client
async def run():async with websockets.connect(ws_url) as ws:print("Connected to Chrome DevTools Protocol")# Enable Page and Network domainsawait enable_domains(ws)# Navigate to a test pageawait navigate_to_page(ws, 'https://example.com')# Listen for events and responseswhile True:message = await ws.recv()await handle_message(message)# Run the WebSocket client
asyncio.get_event_loop().run_until_complete(run())

代码解释

  1. ws_url: 你需要从 Chrome 获取实际的 webSocketDebuggerUrl,通过访问 http://localhost:9222/json/version 获取。
  2. send_message: 这个函数负责通过 WebSocket 向 Chrome 发送 CDP 指令。每条指令都有唯一的 idmethod,有些指令还需要 params
  3. navigate_to_page: 调用 Page.navigate 指令,将浏览器导航到指定 URL。
  4. enable_domains: 启用 PageNetwork 域,以便接收相关的事件。
  5. handle_message: 根据接收到的事件进行处理。当 Page.loadEventFired 触发时,表示页面加载完成。当 Network.requestWillBeSent 触发时,捕获并打印出网络请求信息。
  6. run: 主函数,首先通过 WebSocket 连接到 Chrome,然后发送指令并接收事件。

运行步骤

  1. 打开 Chrome 并启用远程调试,使用命令行启动 Chrome:

bash复制代码chrome.exe --remote-debugging-port=9222

  1. 访问 http://localhost:9222/json/version,找到对应的 webSocketDebuggerUrl,并替换代码中的 {your-page-id}
  2. 运行该 Python 脚本:

bash复制代码python your_script.py

结果

  • 脚本将打开一个新页面导航到 https://example.com。
  • 当页面加载完成时,脚本会输出 "Page has finished loading"
  • 每当页面发出网络请求时,脚本会输出请求的 URL。

这个示例演示了如何通过 CDP 使用 Python 和 WebSocket 实现页面控制和事件监控。在实际项目中,你可以扩展代码来处理更多的指令和事件。


总结

通过这些实例化的比喻和解释,我们可以更直观地理解 Chrome DevTools Protocol 中的 方法事件类型。它们就像一个复杂的建筑体系,每个房间(域)负责不同的功能,每个按钮(方法)执行特定的操作,事件是自动发出的提醒信号,而数据则装在特定的盒子里(类型)进行传递。理解这些概念后,我们可以更加灵活高效地使用 CDP 来完成调试、自动化任务。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/60233.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FPGA学习笔记#7 Vitis HLS 数组优化和函数优化

本笔记使用的Vitis HLS版本为2022.2,在windows11下运行,仿真part为xcku15p_CIV-ffva1156-2LV-e,主要根据教程:跟Xilinx SAE 学HLS系列视频讲座-高亚军进行学习 学习笔记:《FPGA学习笔记》索引 FPGA学习笔记#1 HLS简介及…

苍穹外卖05-Redis相关知识点

目录 什么是Redis? redis中的一些常用指令 value的5种常用数据类型 各种数据类型的特点 Redis中数据操作的常用命令 字符串类型常用命令: 哈希类型常用命令 列表操作命令 集合操作命令 有序集合操作命令 通用命令 在java中操作Redis 环境…

SpringBoot(八)使用AES库对字符串进行加密解密

博客的文章详情页面传递参数是使用AES加密过得,如下图所示: 这个AES加密是通用的加密方式,使用同一套算法,前端和后端都可以对加密之后的字符串进行加密解密操作。 目前线上正在使用的是前端javascript进行加密操作,将加密之后的字符串再传递到后端,PHP再进行解密操作。…

前端常用时间操作汇总

(1)获取中国标准时间: let now new Date(); ​ // Thu Nov 14 2024 17:13:49 GMT0800 (中国标准时间) (2)获取年份: let year now.getFullYear(); ​ // 2024 (3)获取月份&…

【Windows erver】配置高性能电源管理

操作场景 在 Windows Server 操作系统上,需要配置高性能电源管理,才能支持实例软关机,否则云服务器控制台只能通过硬关机的方式关闭实例。本文档以 Windows Server 2012 操作系统为例,介绍配置电源管理的方法。 操作说明 修改电…

《线性代数》学习笔记

列向量无关 上个星期继续学线性代数,一个矩阵,如何判断它是的列向量有几个是线性无关呢?其实有好几个方法。第一个就是一个一个判断。 先选定一个,然后看下这两个,怎么看呢?如果两个列向量线性相关&#…

【JAVA基础】MAVEN的安装及idea的引用说明

本篇文章主要讲解,maven的安装及集成在idea中进行构建项目的详细操作教程。 日期:2024年11月11日 作者:任聪聪 所需材料: 1、idea 2024版本及以上 2、maven 3.9.9安装包 3、一个空java springBoot项目,可以使用阿里云…

Rust学习(二):rust基础语法Ⅰ

Rust学习(二)——rust基础语法Ⅰ: 1、关键字: 了解编程语言的同学都清楚,关键字在一门编程语言中的意义,所谓关键字就是语言的创造者及后续开发者们,以及定义好的具有特殊含义和作用的单词&am…

AI变现,做数字游民

在数字化时代,AI技术的迅猛发展不仅改变了各行各业的生产方式,还为普通人提供了前所未有的变现机会。本文将探讨如何利用AI技术实现变现,成为一名数字游民,享受自由职业带来的便利与乐趣。 一、AI技术的变现潜力 AI技术以其强大…

解非线性方程

实验类型:●验证性实验 ○综合性实验 ○设计性实验 实验目的:进一步熟练掌握解非线性方程的二分法算法、牛顿迭代法,提高编程能力和解算非线性方程问题的实践技能。 实验内容:用二分法算法(取[a,b][1,2])、牛顿迭代法解算非线性…

详细分析Guava库中的注解@VisibleForTesting,用于标记提醒私有(附Demo)

目录 前言1. 基本知识2. Demo 前言 对于Java基本知识推荐阅读: java框架 零基础从入门到精通的学习路线 附开源项目面经等(超全)【Java项目】实战CRUD的功能整理(持续更新) 从实战中学习: 源码如下&…

Ubuntu 22.04.5 配置vlan子接口和网桥

使用bond为物理接口,bond配置可以参考:https://blog.csdn.net/qq_50247813/article/details/143630081 实验一、配置vlan子接口 创建bond0,模式为802.3ad;从网卡,ens37,ens38,添加子接口 bond0.…

Hadoop(YARN)

文章目录 YARN基础架构YARN工作原理YARN调度器和调度算法先进先出调度器容量调度器公平调度器 YARN常用命令 YARN基础架构 YARN是Hadoop集群的资源管理和调度系统,它负责为各种分布式计算任务分配和管理资源,包含以下组件:ResourceManager,N…

【GoWeb示例】通过示例学习 Go 的 Web 编程

文章目录 你好世界HTTP 服务器路由(使用 gorilla/mux)连接到 MySQL 数据库MySQL 数据库简单操作模板静态资源和文件操作表单处理中间件(基础)中间件(高级)会话JSONWebsockets密码哈希 你好世界 Go语言创建…

【C语言】Union

一.Union的用法 1.什么是Union? union 共用体名{ 成员列表 }; union,“联合体、共用体”,在某种程度上类似结构体struct的一种数据结构,共用体(union)和结构体(struct)同样可以包含很多种数据类型和变量。 2.为什么使用union&#xff1…

2024最新版JavaScript逆向爬虫教程-------基础篇之Chrome开发者工具学习

目录 一、打开Chrome DevTools的三种方式二、Elements元素面板三、Console控制台面板四、Sources面板五、Network面板六、Application面板七、逆向调试技巧7.1 善用搜索7.2 查看请求调用堆栈7.3 XHR 请求断点7.4 Console 插桩7.5 堆内存函数调用7.6 复制Console面板输出 工欲善…

Debezium日常分享系列之:异步 Debezium 嵌入式引擎

Debezium日常分享系列之:异步 Debezium 嵌入式引擎 动机目标非目标保留Kafka Connect模型计划的更改线程池并行运行源任务存储偏移量并发处理CDC事件禁用CDC事件的完全排序自定义记录处理器并行处理记录的选项存储偏移量引擎状态和生命周期防止资源泄漏异常处理退出…

大数据学习12之HBase

1.基本概念 1.1简介 Apache HBase(Hadoop DataBase)是一个开源的、高可靠性、高性能、面向列(这里指列族,非列式存储)、可伸缩、实时读写的分布式数据库,其设计思想来源于 Google 的 BigTable 论文。利用 …

POP3、SMTP、FTP、HTTP、BGP、DNS、DHCP、RIP、Ping、Traceroute

POP3 全称:Post Office Protocol 3,即邮局协议第3版。 作用:主要用于电子邮件系统中从邮件服务器检索电子邮件至本地客户端应用程序。它是互联网中最传统的邮件接收协议之一。 工作方式:允许用户通过客户端软件(如Ou…

vue之组件网站(后续补)

vue移动端 Vant 4 NutUI cube-ui vue电脑端 Element Plus OpenTiny Arco Design Ant Design Vue Vuetify Naive UI react移动端 Ant Design NutUI react vant