专题背景

近几年随着开源在国内的蓬勃发展，一些高校也开始探索让开源走进校园，让同学们在学生时期就感受到开源的魅力，这也是高校和国内的头部互联网企业共同尝试的全新教学模式。本专题会记录这段时间内学生们的学习成果。

更多专题背景参考:【DoKit&北大专题】缘起

系列文章

【DoKit&北大专题】缘起

【DoKit&北大专题】-读小程序源代码（一）

【DoKit&北大专题】-读小程序源代码（二）

【DoKit&北大专题】-读小程序源代码（三）

【DoKit&北大专题】-实现DoKit For Web请求捕获工具（一）产品调研

原文

一、研究背景

在学院和企业合作开设的开源软件开发实践课程中，我选择了滴滴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面板：页面元素添加边框；加时间戳刷新页面；支持自定义代码片段。

• 官方文档：github.com/liriliri/er…

• 预览demo：在手机端直接访问 eruda.liriliri.io/

• 使用方式：有以下四种方式，可满足开发中的各种需要。

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

<script src="https://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="https://juejin.cn/post/node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>
复制代码

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

;(function () {
    var src = 'https://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

• 官方文档：github.com/Tencent/vCo…

• 预览demo：www.w3cways.com/demo/vconso…

• 使用方式：

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部分。

三、两者比较

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

作者信息

作者：直球少年satoshi

原文链接：juejin.cn/post/695528…

来源：掘金