mdebug是腾讯新闻TNTWEB团队开发的一款基于react的移动端web调试工具。多年腾讯新闻微信手Q双插件移动端开发实践沉淀。与vconsole、eruda等调试工具相比，它是使用现代框架编写的。集成网络监控能力，提供更丰富的调试能力和API，具有更强大的网络抓包能力，易于接入和使用。本文将从背景、架构、功能、实现原理、未来扩展点等角度全面介绍该工具。1、后台调试一直是移动web开发的痛点，业界也在不断寻找更好的调试工具解决方案。从真机联调、js模拟、Nodejs代理、代理软件等方面提出移动web调试解决方案。mdebug是一款通过js模拟实现移动web调试的轻量级工具，不依赖任何插件，简单易用，功能强大。Git地址：https://github.com/tnfe/mdebug快速体验：https://tnfe.github.io/mdebug二、功能介绍mdebug提供系统、日志、网络、元素、存储、代理、性能实用功能.下面我们一一介绍这些功能：1.系统系统功能提供当前访问地址、UA、窗口大小、用户标识等信息，支持点击复制，让您快速了解当前系统情况.2、element呈现当前页面的dom元素，可以快速了解当前页面的dom元素，支持展开和折叠，体验接近chromedevtoolselements。3、日志支持多种日志展示，日志分类，全局过滤，日志导出，执行js命令，支持长日志折叠和展开，提高大日志量展示的性能。4、网络支持多种网络请求查看，包括静态资源、接口、websocket请求等，支持模糊搜索。5、Storage和cookies支持多种存储显示，支持增删存储，支持模糊搜索，支持长日志折叠展开，提高大日志量显示性能等功能。6、前端代理proxy是本地主机的简易版，支持通过面板快速修改域名代理，将页面请求转发到其他域名。7、性能方面，参考业界通用的性能监控指标，输出页面当前性能。三、快速使用1.ES6importmdebugfrom'mdebug';mdebug.init();2。CDN(function(){varscp=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);})();4.API介绍1.initmdebug.init({containerId:''//mdebug挂载容器id，传空则内部自动生成一个唯一id,plugins:[],//传入mdebug插件hideToolbar:[],//传入需要隐藏的tabid});2.addPluginmdebug.addPlugin({id:'',//tabidname:'',//tab对应的中文标题,enName:'',//tab对应的英文标题组件:()=>{},//tab对应的react组件});3.removePlugin//支持移除的面板对应的id/*System=>system;元素=>elements;Console=>consoleApplication=>applicationNetWork=>networkPerformance=>performanceSettings=>settings*/mdebug.removePlugin([]);4.exportLog/*@returned{type:''//日志类型source:[],//原始日志}@paramstype//type等于log，返回所有控制台日志//type等于net，返回所有net日志*/mdebug.exportLog(类型);5。onmdebug.on(eventName,callback);6.emitmdebug.emit（事件名称，数据）；5.事件列表事件名称数据触发时序readyobjectmdebug加载addTabobject添加面板removeTabarray移除面板changeTabobject面板切换6.业界主流调试工具介绍1.js模拟erudahttps://github.com/liriliri/e...vconsolehttps://liuxianyu.cn/article/...2。抓包工具Fiddlerhttps://www.cnblogs.com/yyhh/...Charleshttps://www.cnblogs.com/peng-...https://www.cnblogs.com/linyf...Tcpdumphttps://juejin.cn/post/684490...USBhttps://aotu.io/notes/2017/02...3。Nodejs代理工具whistlehttps://segmentfault.com/a/11...LivePoolhttps://www.freebuf.com/secto...AnyProxyhttps://jingyan.baidu.com/art..七、行业解决方案对比mdebug相比行业js模拟调试工具，在扩展性和用户体验上做了更多的思考和探索8.整体架构mdebug基于react框架编写，充分利用了组件化的思想，简化了实现逻辑。它可以与现有的React组件充分结合，以提高可扩展性。并通过事件机制减轻mdebug与外部业务逻辑代码通信的负担。九、实现原理1、拦截console相关源码将console输出的log通过hookconsoleapi传输到mdebug进行格式化显示。并支持日志检索、导出等功能2、HookFetchAjax相关源码mdebug在底层拦截网络请求，将网络请求的相关信息存储在内存队列中，并将相关事件派发给mdebug显示。同时支持网络请求日志的全局检索和导出等。3.性能API通过性能api，我们可以获得浏览器页面加载性能，静态资源加载等。(1)页面性能mdebug使用window。performance.timing获取页面性能加载数据，参考业界常用性能指标的计算方法，为业务提供简单直观的性能数据。(2)静态资源加载通过performance.getEntries获取页面静态资源加载状态，通过事件机制通知mdebug网络面板。(3)相关源码https://github.com/tnfe/mdebug/blob/master/src/polyfill.js#L346https://github.com/tnfe/mdebug/blob/master/src/utils/resources/索引.js#L164。使用redux进行状态管理5.调用原生存储api获取、设置、删除存储6.除了redux状态管理外，使用eventbus事件机制进行日志、网络数据分发通知、mdebug与外部业务的通信逻辑代码10.未来扩展点mdebug是对移动web调试工具的一次全新探索。未来可以结合业务实践积累更多的功能。通过插件机制，可以自由组合，供业务使用。此外，我们也在探索对多种前端框架的支持。插件编写可以支持vue、react、nativejs等，另外作为react学习的入门项目，也是一个很好的实践项目。
