mdebug是腾讯新闻TNTWEB团队推出的基于react开发的挪动web调试工具。积淀自腾讯新闻微信手q双插件多年的挪动web开发实际中。相比vconsole, eruda等调试工具, 应用古代框架进行编写。整合network监控能力,提供了更丰盛的调试能力和api, 领有更弱小的网络捕捉能力,接入和应用简略。本文将从背景, 架构,性能, 实现原理, 将来扩大点等角度全面介绍这款工具。
一.背景
调试始终是挪动web开发的疼点，业界也在调试工具上一直寻找更好的解决方案。从真机联调，js模仿，Nodejs代理, 代理软件等方面提出挪动web调试解决方案。mdebug是一款通过js模仿来实现挪动web调试的轻量化工
具，无需依赖任何插件，应用简略，功能强大。
git地址: https://github.com/tnfe/mdebug
疾速体验: https://tnfe.github.io/mdebug
二、性能介绍
mdebug提供了零碎，日志，网络，元素，存储，代理，性能七大实用功能。上面咱们逐个介绍这些性能:
1.零碎
零碎性能提供了以后拜访地址，UA,视窗大小，用户标示等信息，并反对点击复制，能够让你疾速理解以后零碎状况。
2.元素
出现了以后页面的dom元素，能够疾速理解以后页面的dom元素状况，反对开展和折叠，体验靠近chrome devtools elements。
3. 日志
反对多种日志展示，反对日志分类，全局过滤，日志导出，执行js命令,反对长日志折叠开展，晋升大日志量展现性能等性能。
4.网络
反对多种网络申请查看，包含动态资源，接口，websocket申请等，并反对含糊查找。
5.存储和Cookie
反对多种存储展示,反对增删存储，反对含糊查找，反对长日志折叠开展，晋升大日志量展现性能等性能。
6. 前端代理proxy
简略版的本地host，反对通过面板疾速批改域名代理，将页面申请转发到另外一个域名
7.性能performance
参考业界性能监控罕用指标，输入页面以后性能状况
三、疾速应用
1. ES6
import mdebug from 'mdebug'; mdebug.init();2. CDN
(function() { var scp = document.createElement('script'); // 加载最新的mdebug版本 scp.src = 'https://unpkg.com/mdebug@latest/dist/index.js'; scp.async = true; scp.charset = 'utf-8'; // 加载胜利并初始化 scp.onload = function() { mdebug.init(); }; // 加载状态切换回调 scp.onreadystate = function() {}; // 加载失败回调 scp.onerror = function() {}; document.getElementsByTagName('head')[0].appendChild(scp);})();四. API介绍
1. init
mdebug.init({ containerId: '' // mdebug挂载容器id, 如果传空, 外部会主动生成一个不反复的id, plugins: [], // 传入mdebug插件 hideToolbar: [], // 传入须要暗藏的tab id});2. addPlugin
mdebug.addPlugin({ id: '', // tab id name: '', // tab对应的中文title, enName: '', // tab对应的英文title component: () => {}, // tab对应的react组件});3. removePlugin
// 反对移除的panel对应的id/*System => system;Elements => elements;Console => consoleApplication => applicationNetWork => networkPerformance => performanceSettings => settings*/mdebug.removePlugin([]);4. exportLog
/*@returned { type: '' // 日志类型 source: [], // 原始日志}@params type// type等于log, 返回所有的console日志// type等于net, 返回所有的net日志*/mdebug.exportLog(type);5. on
mdebug.on(eventName, callback);6. emit
mdebug.emit(eventName, data);五、事件列表
| 事件名称 | 数据 | 触发机会 |
|---|---|---|
| ready | object | mdebug加载结束 |
| addTab | object | 减少面板 |
| removeTab | array | 移除面板 |
| changeTab | object | 面板切换 |
六.业界支流调试工具介绍
1. js模仿
- eruda
https://github.com/liriliri/e... - vconsole
https://liuxianyu.cn/article/...
2.抓包工具
- Fiddler
https://www.cnblogs.com/yyhh/... - Charles
https://www.cnblogs.com/peng-...
https://www.cnblogs.com/linyf... - Tcpdump
https://juejin.cn/post/684490... - USB https://aotu.io/notes/2017/02...
3. Nodejs代理工具
- whistle
https://segmentfault.com/a/11... - LivePool
https://www.freebuf.com/secto... - AnyProxy
https://jingyan.baidu.com/art...
七、业界计划比照
和业界js模仿调试工具相比，mdebug在扩展性，用户体验上做了更多思考和摸索。
八、整体架构
mdebug基于react框架编写， 充分利用组件化思维，简化实现逻辑。 能够和现有react组件充沛联合晋升扩展性。并通过事件机制来升高mdebug和内部的业务逻辑代码通信累赘。
九、实现原理
1. 拦挡console 相干源码
通过hook console api来将console输入的日志，传输到mdebug中进行格式化展示。并反对对日志进行检索，导出等性能
2. Hook Fetch Ajax 相干源码
mdebug在底层拦挡网络申请，将网络申请相干信息，存储在内存队列中，并派发相干事件给mdebug进行展示。 同时反对对网络申请日志进行全局检索，导出等
3. Performance API
通过performance api咱们可能获取到浏览器页面加载性能，动态资源加载等状况。
(1) 页面性能
mdebug应用window.performance.timing来获取页面性能加载数据，并参考业界罕用性能指标计算形式，为业务提供简略直观的性能数据。
(2) 动态资源加载
通过performance.getEntries来获取页面动态资源加载状况，并通过事件机制告诉到mdebug network面板。
(3)相干源码
https://github.com/tnfe/mdebug/blob/master/src/polyfill.js#L346
https://github.com/tnfe/mdebug/blob/master/src/utils/resources/index.js#L16
4. 应用redux来进行状态治理
5. 调用原生存储api来获取，设置，删除存储
6. 除了redux状态治理外，通过eventbus事件机制来进行日志，网络数据的派发告诉， 以及mdebug和内部业务逻辑代码的通信
十、将来拓展点
mdebug作为挪动web调试工具的一个新的摸索，将来能够联合业务实际积淀更多的性能。通过插件的机制来供业务自由组合应用。另外咱们也在摸索多前端框架反对，插件编写上能够反对vue，react，原生js等。另外作为一个react入门学习我的项目，也是一个很好的实际我的项目。