共计 3314 个字符，预计需要花费 9 分钟才能阅读完成。
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 => console
Application => application
NetWork => network
Performance => performance
Settings => 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 入门学习我的项目，也是一个很好的实际我的项目。