Chrome DevTools 组成 Chrome DevTools 包括四个部分: 调试器协议：devtools-protocol[1]，基于 json rpc 2.0。...Chrome DevTools 我们可以看到，Chrome DevTools 的核心是调试器协议。...Chrome DevTools Protocol 协议按域「Domain」划分能力，每个域下有 Method、Event 和 Types。...处理方式有两种，一是拦截掉 Network.enable 请求，这样会取消掉所有的 Network 的推送。二是不把 laucher.js 所在的页面作为调试页面，仅作数据中转用。 ?...Network.enable，就可以一直接收到调试器后端推送的页面快照和网络请求数据。
它提供了高级API来通过 DevTools 协议控制无头 Chrome 或 Chromium ，它也可以配置为使用完整（非无头）Chrome 或 Chromium。...Puppeteer 提供了一系列 API，通过 Chrome DevTools Protocol 协议控制 Chromium/Chrome 浏览器的行为。...请求在有些场景下很有必要，拦截一下没必要的请求提高性能，我们可以在监听 Page 的 request 事件，并进行请求拦截，前提是要开启请求拦截 page.setRequestInterception...目前没有提供原生的用于处理 WebSocket 的 API 接口，但是我们可以通过更底层的 Chrome DevTool Protocol (CDP) 协议获得 const puppeteer = require...，禁止使用 /dev/shm 共享内存 尽量使用同一个浏览器实例，这样可以实现缓存共用 通过请求拦截没必要加载的资源 像我们自己打开 Chrome 一样，tab 页多必然会卡，所以必须有效控制 tab
关于MITM_Intercept MITM_Intercept是一款功能强大的数据包编辑工具，MITM_Intercept可以通过Burp或其他具备SSL和TLS拦截功能的工具来拦截和修改非HTTP...从目标接收到的每个数据都将打包到HTTP POST请求的Body中，其中的URL将包含“SERVER_RESPONSE”。随后，这些请求都将被发送到本地HTTP拦截服务器。...修改数据包的另一种方法就是使用一个Python脚本，HTTP拦截服务器在接收消息时将运行该脚本。 发送到HTTP拦截服务器的消息Body将打印到shell。如果给出修改脚本，修改后将打印消息。...修改脚本 我们可以通过-s选项来染HTTP拦截服务器运行一个Python脚本，但服务器接收到HTTP请求的时候便会运行这个脚本，脚本运行完成后HTTP拦截服务器便会回传响应信息。...配置代理时（如Burp），请求的修改将在脚本运行之前进行，响应的修改将在脚本运行之后进行。
当年 WebSocket 的实现方案还处在草案阶段，Chrome 架构师就大胆地采用 WebSocket 实现了调试协议中的主协议部分。...（简称CDP）此协议包含两部分 HTTP 和 WebSocket，DevTools 的 Web UI 将控制命令发往浏览器内核，其中的控制命令、参数以及返回值，都是通过 CDP 来进行封装。...:9222 发起 HTTP / WebSocket 请求，即可获取 DevTools 中的数据。...4.2.3 WebSocket 协议分析 WebSocket 协议由四部分组成: Domain 、Method 、 Event 和 Type 。...， 此类有两个重要方法 OnJsonRequest 和 OnWebSocketMessage ，分别用来处理 HTTP 协议和 WebSocket 协议。
url 和 webRoot 等参数。...❞ 原理 原理其实和 chrome debugger 扩展原理类似。也是基于 Chrome 的 devtool 协议，建立 「websocket 链接。...比如浏览器网络线程发送的请求以及 DOM 节点信息。 你可以通过 「chrome devtool protocol」 拿到很多信息，比如上面提到的 network 请求。...由于是 websocket 建立的双向链接，因此在 VSCODE 中改变 dom 等触发浏览器的修改也变得容易。...我们只需要在 VSCODE（websocket client） 中操作后通过 websocket 发送一条 JSON 数据到浏览器（websocket server）即可。
Chrome DevTools 是我们每天都用的工具，它可以查看元素、网络请求、断点调试 JS、分析性能问题等，是辅助开发的利器。 今天不讲怎么使用它，而是讲一个好玩的方向：定制自己的调试工具。...之前讲过，Chrome DevTools 和 Chrome 是分离的架构，两者之间通过 WebSocket 通信，通信协议是 Chrome DevTools Protocol，简称 CDP： 其实这不准确...那我们对接一下这个协议，返回相应格式的数据，能在 Chrome DevTools 里做显示么？ 我们试一下。...比如 WebSocket 时的通信实现是这样的： 而 electron 环境下是这样的： 嵌入到一个环境的时候是这样的： 这也是为什么文章最开始我说 Chrome DevTools 和 Chrome...当然可以，不过这样就没必要用 CDP 了，自己创建一套协议不香么？ 其实 Vue DevTools 和 React DevTools 就是自己定制的一套协议。
有同学说，我用 Chrome DevTools 调试网页，可以查看元素，网络请求，断点运行 JS，用 Performance 工具分析性能等，这是网页的调试。...我们分别来看一下： Chrome DevTools 原理 Chrome DevTools 分为两部分，backend 和 frontend： backend 和 Chrome 集成，负责把 Chrome...frontend 是独立的，负责对接调试协议，做 UI 的展示和交互。 两者之间的调试协议叫做 Chrome DevTools Protocol，简称 CDP。...没错，都有 backend 部分负责拿到运行时的信息，有 frontend 部分负责渲染和交互，也有调试协议用来规定不同数据的格式，还有不同的信道，比如 WebSocket 、Chrome 插件的 background...调试就是通过某种信道（比如 WebSocket）把运行时信息传递给开发工具，做 UI 的展示和交互，辅助开发者排查问题、了解代码运行状态等。
devtools 本身是开源的前端项目，很容易构建并集成，并与 Chrome DevTools Protocol (简称 CDP) 协议进行对接。...简单来说，实现远程调试需要具备三个条件： 通过原生 Javascript 实现 CDP 的协议规范，构建出 sdk.js (文件名称任意)，并在被调试页面中加载该 js 构建出 Chrome Devtools...前端产物，并部署为 web 页面 实现 websocket 协议转发 Chrome Devtools 与目标页面之间的协议交互是用 websocket 来通信的。...通过实现一个 websocket 转发的中间服务层，其作用是将 devtools 的协议消息转发给目标页面处理，或将目标页面的协议消息转发给 devtools 处理。...（Fetch、XHR） HTML、JS、CSS 静态资源请求抓包 6、Application Local Storage Session Storage Cookies 7、Screenshot（扩展协议
chrome 调试协议，是基于 scoket（websocket、usb、adb ）消息的 json rpc 协议。...Chromium、V8 或 Node.js Protocol：cdp 调试协议，调试器前端和后端使用此协议通信。它分为代表被检查实体的语义方面的域。...每个域定义类型、命令（从前端发送到后端的消息）和事件（从后端发送到前端的消息）。该协议基于 json rpc 2.0 运行； Channels：消息通道，后端和前端之间发送协议消息的一种方式。...) 发送的 cdp 命令，并将 dom、network、资源信息返回给远程调试端 cdp协议结构 cdp 协议按域「Domain」划分能力，每个域下有 Method、Event 和 Types。...分别提供 websocket 服务做消息转发和 chrome 插件在 backend 端来监听执行发送 cdp 消息。
chromedp是一个更快、更简单的Golang库用于调用支持Chrome DevTools协议的浏览器，同时不需要额外的依赖（例如Selenium和PhantomJS） Chrome和Golang都与...Google有着相当密切的关系，而Chrome DevTools其实就是Chrome浏览器按下F12之后的控制终端 简单来说，chromedp可用来渲染网页，进行web测试或者网页内容抓取。...Chrome DevTools Protocol (CDP) Chrome DevTools Protocol (CDP) 的主页在：https://chromedevtools.github.io/devtools-protocol...Chrome 的开发者工具就是使用这一系列的接口，并且 Chrome 开发者工具来维护这些接口。 所谓 CDP 的协议，本质上是什么呢？本质上是基于 websocket 的一种协议。...所以我们如果写了一个客户端程序，也和目标页面创建一个基于 CDP 的 websocket连接，我们也可以通过这个协议来对页面进行操作。
，将telemetry使用的与chrome之间的基本的通信协议进行讲解。...)交互和调试的协议通道，然后采用websocket再来与每个页面通信。...3.1协议启动 运行chrome时增加--remote-debugging-port=9528参数，即在9528端口打开远程调试通信协议。...://www.jd.com'}}请求，访问url。...q=devtools_protocol_dispatcher.cc&sq=package:chromium&dr 使用远程调试协议和websocket可以很轻松的实现chrome的自动化测试。
开启Devtools强制开启Devtools我用的是https://github.com/JaveleyQAQ/WeChatOpenDevTools-Python这个项目。...burp的监听端口，协议选择https然后新建代理规则。...应用程序选择WeChatApp.exe;WechatBrowser.exe;WeChatAppEx.exe动作选择拦截即可实现小程序的抓包自动计算签名前面的准备工作已经基本完成，可以实现对小程序的分析了...协议进行的聊天，抓到的数据包如下：GET /websocket?...http协议切换到websocket协议，而这个数据包中的appId和token是由客户端直接发送给服务器的，所以这两个值要么是js计算出来的，要么是服务器返回的数据，先搜一下前端的js代码，发现appid
Chrome DevTools 的原理 Chrome DevTools 被设计成了和 Chrome 分离的架构，两者之间通过 WebSocket 通信，设计了专门的通信协议：Chrome DevTools...这样只要实现对接 CDP 协议的 ws 服务端，就可以用 Chrome DevTools 来调试，所以 Chrome DevTools 可以用来调试浏览器的网页、调试 Node.js，调试 Electron...这个 CDP 的调试协议是 json 格式的，如果想看它传输了什么也是可以的： 下载金丝雀版本的 chrome： 在 Chrome DevTools 的 more tools 里打开 Protocol...总结 Chrome DevTools 和 Chrome 是分离的架构，两者通过 WebSocket 通信，通信协议是 Chrome DevTools Protocol，可以在金丝雀版本的 Protocol...要注意的是调试的目标浏览器要和用的 Chrome DevTools 版本一一对应才行，所以第一次调试会先下载 Chrome DevTools，这需要访问 google 的域名，如果没有科学上网，会有白屏和
网络诊断 给OkHttpClient添加拦截器。...OkHttpClient.Builder() .addNetworkInterceptor(new StethoInterceptor()) .build(); 主要功能有包括下载图片的预览，JSON数据查看，网络请求内容和返回内容...设备上的app相当于一个服务器，脚本是客户端对它进行访问 后缀为_devtools_remote的socket是android留给chrome的后门。...详细内容可以看这篇官方文档 这篇文档提供的例子是在命令行中输入下面的命令，就能在电脑上看到手机chrome中的内容了： adb forward tcp:9222 localabstract:chrome_devtools_remote...打开的chrome-devtool其实是一个websocket连接。 ?
可以看到启动了一个 WebSocket 的服务端，这就是调试服务，用某个调试工具客户端连上就行了： 调试客户端可以是 Chrome Devtools 也可以是 VSCode。...启动一个 WebSocket 客户端来实现调试的 UI，包括调用栈、上下文的显示、打断点、单步运行等功能，比如我们用过的 Chrome Devtools、VSCode Debugger。...但是 Chrome Devtools 的调试协议是 Chrome Devtools Protocol，和 V8 Debug Protocol 还是有些差距的，怎么能用上 Chrome Devtools...Node.js 在把调试工具的协议换成兼容 Chrome Devtools Protocol 的协议之后，只要实现个 DAP 的 adapter 就可以对接到 VSCode 的调试工具了。...这样还是太麻烦了，所以后来 Node.js 和 v8 团队合作实现了 v8-inspector，可以让 Node.js 提供的调试协议是直接兼容 Chrome Devtools Protocol 的。
相信大家应该都用过chrome开发者工具，其实它本质上就是一个web app，通过Chromium提供的远程调试协议，开发者工具就可以和chromium基于WebSocket进行通信，如上图左边所示。...调试功能也是基于这个协议实现的，但是如果让调试界面直接和Chromium连接会有两个问题，首先是我们没办法完全控制调试过程，不能主动向Chromium发送指令；其次是，Chromium提供的WebSocket...为了解决这两个问题，我们在调试界面和Chromium之间做了一层拦截，如上图右边所示，首先起了一个WebSocketserver，让它充当Chromium跟调试界面连接；然后通过接口获取到真实的WebSocket...通过这种方式，就可以拦截掉所有调试界面和Chromium之间的WebSocket通信，之后做一个转发就可以了。 3.2 生产态调试 生产态调试功能是为了帮助开发人员更方便地调试线上代码。...代理功能的实现是在background进程中，我们基于Node.js搭建了代理服务器，并将拦截到的请求数据存储在nedb数据库中，因为请求量可能比较大，并且需要根据请求状态的变化对数据进行更新。
认识 Chrome DevTools 协议 Chrome DevTools 协议基于 WebSocket，利用 WebSocket 建立连接 DevTools 和浏览器内核的快速数据通道。...我们使用 DevTools 的时候，浏览器内核 Chromium 本身会作为一个服务端，我们看到的浏览器调试工具界面，通过 Websocket 和 Chromium 进行通信。...资源加载后，DevTools 会建立与浏览器的 Websocket 连接，并开始交换 JSON 消息。...Chrome DevTools 协议域划分 Chrome DevTools 协议具有与浏览器的许多不同部分（例如页面、Service Worker 和扩展程序）进行交互的 API。...自动化性能分析 通过使用 Chrome DevTools 协议，我们可以获取 DevTools 提供的很多数据，包括网络数据、性能数据、运行时数据。
我认为核心的理解在于： 1、 就是具有基于Chrome DevTools Protocol 的chrome远程调试功能的无界面浏览器。...2、 现在的python和nodejs对chrome headless进行操作的封包都是基于Chrome DevTools Protocol来实现的。...与chrome通信的基本知识： 简单说一下这套协议吧，这套协议通过 websocket 进行通信，发送和返回的内容都是 json 格式。.../ 05 — 总结及思考 1、 其实使用websocket和chrome进行通信整个过程是异步的，使用异步的方法可以解决粗暴的通过超时来控制循环监听的问题，同时也能提高扫描效率。...可以尝试用其他方法实现post请求，如在Network.requestWillBeSent时修改请求参数。 3、 由于企业内部对qps有限制，我们扫描的payload数量会被限制的很少。
云服务器
ICP备案
实时音视频
对象存储
云直播
