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

直球少年satoshi
1,173 阅读4分钟

一、研究背景

在学院和企业合作开设的开源软件开发实践课程中，我选择了滴滴DoKit开源实践项目。课程的实践内容是在老师指导下完成DoKit Web端的一个小工具，我选择了请求捕获这一部分，它的实现效果类似于chrome devtools的Nework板块。

这个需求的研发背景：对于前端开发人员，在移动端Web开发的过程中，一般都是使用chrome等浏览器的移动端模式来模拟各种手机型号，在chrome上开发调试好了再发布测试，如果想要在移动端看到数据只能通过抓包，想断点调试只能处处alert。

然而现在手机产品千千万，如果能有一个可以在移动端像chrome devtools一样随时调试、查看接口数据的工具就更完美了。

二、产品调研

现在比较常用的移动端调试工具非Eruda和VConsole莫属，其他产品还有整体自动化测试解决方案UI Recorder、腾讯AlloyTeam团队开源的Web开发调试工具AlloyLever、chrome devtools本身也提供移动端的USB调试模式，具体可参考文章移动端Web开发调试工具：Chrome DevTools。

这里重点观察Eruda和VConsole，两种工具的使用都很简单，下面就将这两个工具接入项目demo里看看它们的具体功能。

1.Eruda

Eruda是一个专为手机网页前端设计的调试面板，类似DevTools的迷你版，其主要功能包括：捕获console日志、检查元素状态、捕获XHR请求、显示本地存储和Cookie信息等等。

  • 功能清单
  • 按钮拖拽，面板透明度大小设置。
  • Console面板：捕获Console日志，支持log、error、info、warn、dir、time/timeEnd、clear、count、assert、table；支持占位符，包括%c自定义样式输出；支持按日志类型及正则表达式过滤；支持JavaScript脚本执行。
  • Elements面板：查看标签内容及属性；查看应用在Dom上的样式；支持页面元素高亮；支持屏幕直接点击选取；查看Dom上绑定的各类事件。
  • Network面板：捕获请求，查看发送数据、返回头、返回内容等信息。
  • Resources面板：查看并清除localStorage、sessionStorage及cookie；查看页面加载脚本及样式文件；查看页面加载图片。
  • Sources面板：查看页面源码；格式化html，css，js代码及json数据。
  • Info面板：输出URL及User Agent；支持自定义输出内容。
  • Snippets面板：页面元素添加边框；加时间戳刷新页面；支持自定义代码片段。

1.通过CDN使用：在index.html中添加以下代码

<script src="//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script>
<script>eruda.init();</script>

2.通过npm安装：

npm install eruda --save

3.在页面中加载脚本：在index.html中添加以下代码

<script src="node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>

4.通过url参数来控制是否加载调试器（可以达成上线后给自己留个后门的效果，例如绑定某个按钮，连续点击几次后开启调试工具）

;(function () {
    var src = '//cdn.jsdelivr.net/npm/eruda';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();
  • 同时Eruda还提供了两个可配置的属性：
//container: 用于插件初始化的 Dom 元素，如果不设置，默认创建 div 作为容器直接置于 html 根结点下面。
//tool：指定要初始化哪些面板，默认加载所有。
let el = document.createElement('div');
document.body.appendChild(el);

eruda.init({
    container: el,
    tool: ['console', 'elements'],
    useShadowDom: true
});
  • Eruda请求捕获功能的接入效果：
  • Eruda Network与chrome devtools Network比较：

可以看到Eruda Network仅包含chrome devtools Network的Headers、Response部分，少了Preview/Initator/Timing部分，且Headers的字段显示不完整。

2.VConsole

  • 使用方式：

1.通过npm安装：

npm install vconsole

2.在页面中加载脚本：在index.html中添加以下代码

<script src="https://www.w3cways.com/demo/vconsole/vconsole.min.js?v=2.2.0"></script>
<script>var vConsole = new VConsole();</script>

同时VConsole还提供许多配置属性，详见公共属性及方法。

  • VConsole请求捕获功能的接入效果:
  • VConsole Network与chrome devtools Network比较：

可以看到VConsole Network同样仅包含Headers、Response部分，少了Preview/Initator/Timing部分。

三、两者比较

此处着重关注两个工具的请求捕获部分。

ErudaVConsole
功能模块更齐全（基本包含chrome devtools的所有模块）相对较少
Network部分捕获XHR请求，可查看Headers、Response信息同左
动态加载支持，可添加调试后门或用js异步加载库无相关说明，可自己实现（参考文章）
入口图标相对于屏幕右下角定位，更友好相对于页面右下角定位，需缩放才能看到
可拓展、自定义支持，工具文档支持，辅助文档

四、文章索引

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

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

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

avatar
文章
阅读
粉丝