实现DoKit Web端请求捕获工具(五)具体实现上

·  阅读 371
实现DoKit Web端请求捕获工具(五)具体实现上

一、前言

上一节的结论中,我们知道Eruda的Network请求捕获功能是调用了chobitsu协议工具,现在我们clone下Dokit Web项目,可以参考其他同学的源码目录分析,它的目录结构是一个标准的lerna项目的结构。本节开始着手进行自己的请求捕获插件实现,并将它的功能入口展现在Dokit Web的页面容器中。

关于项目结构,可以参考该文章,此处不再赘述,下面直接记录添加一个新插件的步骤,都在Web/packages目录中进行操作。

二、添加Network插件的菜单项

关于上面提到的文章中剖析源码整体结构的提要:

  • /core/src/index.js:整个项目的入口文件/playground/index.html只引用了web/dist/dokit.js,项目核心代码利用rollup打包在目录packages/web/下,而查看rollup.config.js可以看到,上面的dokit.js便是打包的输出文件,输入文件为/core/src/index.js,其中定义了Dokit全局组件。
  • /web/feature.js中注册系统中的插件。
  • /core/components/home.vue:Dokit菜单页面的完整结构,包括三个components:TopBar,Card,VersionCard。每个features中注册的插件作为一个card显示在菜单页面中。

根据以上线索,添加新的菜单项步骤如下:

  1. 在web/src/plugins下新建新插件network的文件夹,先仿照app-info、demo-plugin目录,在其中新建两个文件index.js和ToolHelloWorld.vue,后面会在这个目录中编写插件的实现代码。这里先在index.js中配置RouterPlugin,并引入Vue组件。
//web/src/plugins/network/index.js
import HelloWorld from './ToolHelloWorld.vue'
import {RouterPlugin} from '@dokit/web-core'

export default new RouterPlugin({
  nameZh: '请求捕获',
  name: 'network',
  icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png',
  component: HelloWorld
})
复制代码
  1. 在web/src/feature.js中首先import插件,再在BasicFeatures.list中添加引入的Network模块。
//web/src/feature.js
import Network from './plugins/network/index'

export const BasicFeatures = {
  title: '常用工具',
  list: [Console, AppInfo, DemoPlugin, DemoSinglePlugin, H5DoorPlugin, Network]
}
复制代码

上面有提到/web/dist/dokit.js是打包的输出文件,输入文件为/core/src/index.js,果然在此处注册了Network插件后,打开/web/dist/dokit.js,自动生成了如下的new RouterPlugin()语句:

此时运行项目就可以看到新插件显示在菜单中:

注:很多情况下safari与chrome的运行情况都会不同,此时safari就看不到新的菜单项。

三、编写请求捕获插件的页面组件

首先需要确定插件的页面功能都有哪些,功能很清晰,与前面调研的Eruda类似,可以参考Eruda的demo,主要包括显示拦截到的请求列表、显示请求详情这两个页面,类似下图。

话不多说我们开始写页面组件。

  1. 首先编写请求列表的页面组件,新建request-item.vue编写请求条目的页面组件

六、本节总结

本节的主要结论是

七、文章索引

实现DoKit Web端请求捕获工具(一)产品调研

实现DoKit Web端请求捕获工具(二)读Eruda源码上

实现DoKit Web端请求捕获工具(三)读Eruda源码下

分类:
开发工具
标签:
分类:
开发工具
标签:
收藏成功!
已添加到「」, 点击更改