码迷,mamicode.com
首页 > 其他好文 > 详细

CDP—Chrome DevTool Protocol

时间:2020-03-27 21:16:24      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:debugger   前端   page   页面   文档   prot   rom   font   protocol   

  • CDP 基于 WebSocket,利用 WebSocket 实现与浏览器内核的快速数据通道
  • CDP 分为多个域(DOM,Debugger,Network,Profiler,Console...),每个域中都定义了相关的命令和事件(Commands and Events)
  • 我们可以基于 CDP 封装一些工具对 Chrome 浏览器进行调试及分析,比如我们常用的 “Chrome 开发者工具” 就是基于 CDP 实现的
  • 如果你以 remote-debugging-port 参数启动 Chrome,那么就可以看到所有 Tab 页面的开发者调试前端页面,还会在同一端口上还提供了 http 服务,主要提供以下几个接口:
GET /json/version                     # 获取浏览器的一些元信息
GET /json or /json/list               # 当前浏览器上打开的一些页面信息
GET /json/protocol                    # 获取当前 CDP 的协议信息   
GET /json/new?{url}                   # 开启一共新的 Tab 页面
GET /json/activate/{targetId}         # 激活某个页面成为当前显示的页面
GET /json/close/{targetId}            # 关闭某个页面
GET /devtools/inspector.html          # 打开当前页面的开发者调试工具
WebSocket /devtools/page/{targetId}   # 获取某个页面的 websocket 地址

很多有用的工具都是基于 CDP 实现的,比如 Chrome 开发者工具chrome-remote-interfacePuppeteer

详情见官方文档

CDP—Chrome DevTool Protocol

标签:debugger   前端   page   页面   文档   prot   rom   font   protocol   

原文地址:https://www.cnblogs.com/codexlx/p/12584325.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!