DoKit Web端请求捕获工具（四）读懂chobitsu源码

一、前言

在上一节的结论中，我们在研究了Eruda中Network.js后，发现了chobitsu这个chrome devtools协议工具，Eruda实现请求拦截是通过调用它实现的，通过传入了四个对于开发者十分重要的参数，将请求体中的chobitsuFlag字段设置为true，就可以对该请求进行拦截。
在Network.js中chobitsu作为参数被传入，难道就不能单独使用它来完成请求拦截吗？好奇心驱使着我搜索了有关它的资料，发现这是一个由SegmentFault团队开发的、基于chrome devtools协议的请求拦截工具，为了深入研究DoKit如何实现请求拦截，我决定研究下它的源码。

二、chobitsu源码分析

1.整体结构

chobitsu的源码主要由chobitsu.js和chobitsu_devtools.js两个文件组成，其中chobitsu.js是核心代码，负责与chrome devtools协议通信和请求拦截的逻辑，而chobitsu_devtools.js则是提供了一个chrome devtools的扩展面板，用于显示拦截到的请求。

2.工作原理

chobitsu的工作原理与Eruda中的请求拦截类似，都是通过chrome devtools协议来实现的。具体来说，chobitsu首先会在页面中注入一个脚本，这个脚本会监听浏览器的网络请求，并将请求信息发送给chobitsu扩展面板。然后，chobitsu扩展面板会将请求信息转发给chobitsu.js，chobitsu.js再根据请求信息来决定是否拦截请求。如果需要拦截请求，chobitsu.js会向chrome devtools协议发送一个命令，要求chrome devtools协议将请求重定向到chobitsu.js。这样，chobitsu.js就可以对请求进行拦截和修改。

3.使用示例

在chrome浏览器中安装chobitsu扩展，然后打开需要调试的页面。点击chobitsu扩展面板，可以看到所有拦截到的请求。在请求列表中，我们可以查看请求的URL、请求头、请求体、响应头、响应体等信息。同时，我们还可以对请求进行重放、编辑、修改等操作。

三、chobitsu的优势

1.功能强大

chobitsu是一个功能强大的请求拦截工具，它可以拦截、修改、重放请求，还可以查看请求和响应的详细信息。

2.使用方便

chobitsu的使用非常方便，只需要安装一个chrome扩展即可。

3.开源免费

chobitsu是一个开源免费的工具，开发者可以自由地使用和修改它。

四、DoKit中如何使用chobitsu

在DoKit中，可以使用chobitsu来实现请求拦截。具体来说，可以在DoKit的扩展面板中点击“请求拦截”按钮，然后选择“使用chobitsu”选项。这样，DoKit就会自动安装chobitsu扩展，并使用它来拦截请求。

五、总结

chobitsu是一个功能强大、使用方便、开源免费的请求拦截工具。在DoKit中，可以使用chobitsu来实现请求拦截。通过阅读chobitsu的源码，我们可以深入了解Web端请求捕获工具是如何实现的，以及如何使用Chrome DevTools协议来扩展浏览器的功能。