Mdebug：基于React开发的移动web调试工具

作者：thinkchen，腾讯 PCG 高级前端开发工程师

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. 日志