當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/2/28 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 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. 日志

支持多種日志展現，支持日志分類，全局過濾，日志導出，執行 js 命令,支持長日志折疊展開，提升大日志量展示性能等功能。

4.網絡

支持多種網絡請求查看，包括靜態資源，接口，websocket 請求等，并支持模糊查找。

5.存儲和 Cookie

支持多種存儲展現,支持增刪存儲，支持模糊查找，支持長日志折疊展開，提升大日志量展示性能等功能。

6. 前端代理 proxy

簡單版的本地 host，支持通過面板快速修改域名代理，將頁面請求轉發到另外一個域名

7.性能 performance

參考業界性能監控常用指標，輸出頁面當前性能情況

三、快速使用

1. ES6

?import?mdebug?from?'mdebug';mdebug.init();

2. CDN

四. API 介紹

1. init

mdebug.init({containerId:?''?//?mdebug掛載容器id,?如果傳空,?內部會自動生成一個不重復的id,plugins:?[],?//?傳入mdebug插件hideToolbar:?[],?//?傳入需要隱藏的tab?id });

2. addPlugin

mdebug.addPlugin({id:?'',?//?tab?idname:?'',?//?tab對應的中文title,enName:?'',?//?tab對應的英文titlecomponent:?()?=>?{},?//?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);

五、事件列表

六.業界主流調試工具介紹

1. js 模擬

eruda https://github.com/liriliri/eruda/blob/master/doc/README_CN.md
vconsole https://blog.csdn.net/yihanzhi/article/details/105728049 https://liuxianyu.cn/article/mobile-vConsole.html

2.抓包工具

Fiddlerhttps://www.cnblogs.com/yyhh/p/5140852.html
Charleshttps://www.cnblogs.com/peng-lan/p/11242954.html https://www.cnblogs.com/linyfeng/p/9496126.html
Tcpdumphttps://juejin.cn/post/6844904084168769549
USB https://aotu.io/notes/2017/02/24/Mobile-debug/index.html

3. Nodejs 代理工具

whistlehttps://segmentfault.com/a/1190000014891582
LivePoolhttps://www.freebuf.com/sectool/73408.html
AnyProxyhttps://jingyan.baidu.com/article/948f5924d0c9a3d80ff5f983.html

七、業界方案對比

和業界 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 面板。

相關源碼

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 入門學習項目，也是一個很好的實踐項目。

總結

以上是生活随笔為你收集整理的Mdebug：基于React开发的移动web调试工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。