mdebug is a web debugging tool developed based on React

1615550396_20_w2880_h2154 (2).png
mdebug is a mobile web debugging tool based on react developed by the Tencent News TNTWEB team Precipitated from years of mobile web development practice of Tencent News WeChat mobile q dual plug-in. Compared with debugging tools such as vconsole and eruda, it uses modern framework for writing. Integrate network monitoring capabilities, provide richer debugging capabilities and APIs, have more powerful network capture capabilities, and are simple to access and use. This article will comprehensively introduce this tool from the perspectives of background, architecture, functions, implementation principles, and future extension points.

1. Background

Debugging has always been a pain point for mobile web development, and the industry is constantly looking for better solutions in debugging tools. From real machine joint debugging , js simulation , Nodejs proxy , proxy software and other aspects to propose mobile web debugging solutions. mdebug is a lightweight chemical industry that implements mobile web debugging through js simulation
Tools, no need to rely on any plug-ins, simple to use and powerful.

git address: https://github.com/tnfe/mdebug

Quick experience: https://tnfe.github.io/mdebug

2. Function introduction

mdebug provides seven practical functions of system, log, network, element, storage, agent, and performance. Below we introduce these functions one by one:

1. System

The system function provides the current access address, UA, window size, user logo and other information, and supports click to copy, allowing you to quickly understand the current system situation.

2. Elements

Presents the dom element of the current page, you can quickly understand the dom element situation of the current page, support expansion and collapse, and the experience is close to chrome devtools elements.

3. Log

Support multiple log display, support log classification, global filtering, log export, execute js command, support long log folding and expansion, and improve the performance of large log volume display.

4. Network

Supports multiple network request viewing, including static resources, interfaces, websocket requests, etc., and supports fuzzy search.

5. Storage and Cookies

Support multiple storage display, support addition and deletion storage, support fuzzy search, support long log folding and expansion, and improve the performance of large log volume display.

6. Front-end proxy proxy

The simple version of the local host, supports to quickly modify the domain name proxy through the panel, and forward the page request to another domain name

7. performance

Refer to the common indicators of performance monitoring in the industry, and output the current performance of the page

Three, fast use

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);
})();

4. API introduction

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);

Five, event list

Event name	data	Trigger timing
ready	object	mdebug loaded
addTab	object	Add panel
removeTab	array	Remove panel
changeTab	object	Panel switch

6. Introduction to the industry's mainstream debugging tools

Seven, industry program comparison

Compared with industry js simulation debugging tools, has done more thinking and exploration scalability and user experience 16135b57560a35.

8. Overall structure

mdebug is written based on the react framework, making full use of componentization ideas and simplifying the implementation logic. It can be fully combined with existing react components to improve scalability. And through the event mechanism to reduce the communication burden of mdebug and external business logic code.

Nine, realization principle

1. Intercept console related source code

Use the hook console api to transfer the console output log to mdebug for formatted display. And support the log retrieval, export and other functions

2. Hook Fetch Ajax related source code

mdebug intercepts network requests at the bottom layer, stores information about network requests in a memory queue, and dispatches related events to mdebug for display. At the same time, it supports global retrieval and export of network request logs, etc.

3. Performance API

Through the performance api, we can get the browser page loading performance, static resource loading, etc.

(1) Page performance

mdebug uses window.performance.timing to obtain page performance loading data, and refers to the common performance index calculation methods in the industry to provide simple and intuitive performance data for the business.

(2) Static resource loading

Get the page static resource loading status through performance.getEntries, and notify the mdebug network panel through the event mechanism.

(3) Related source code

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. Use redux for state management

5. Call native storage api to get, set, delete storage

6. In addition to redux state management, log, network data distribution notification, and communication between mdebug and external business logic code through the eventbus event mechanism

10. Future expansion points

As a new exploration of mobile web debugging tools, mdebug can combine business practices to precipitate more functions in the future. The plug-in mechanism is used for free combination of business. In addition, we are also exploring support for multiple front-end frameworks. Plug-in writing can support vue, react, native js, etc. In addition, as an introductory learning project for react, it is also a good practice project.