TNTWeb – The full name of Tencent News Zhongtai front-end team, partners in the group have practiced and accumulated experience in Web front-end, NodeJS development, UI design, mobile APP and other large front-end fields.
At present, the team mainly supports the front-end development of Tencent news business. Besides business development, some front-end infrastructure has been accumulated to enable business efficiency improvement and product innovation.
The team advocates open source construction, has a variety of technical masters, the team Github address: github.com/tnfe
Yunfeng Github: github.com/ihtml5
Mdebug is a web debugging tool developed based on React developed by Tencent News TNTWEB team, precipitate from Tencent News wechat q dual-plug-in mobile Web development practice for many years. Compared to debugging tools such as VConsole and Eruda, it is written using modern frameworks. Integrated network monitoring capabilities, provides richer debugging capabilities and APIS, has more powerful network capture capabilities, easy access and use. This article will introduce the tool from the perspective of background, architecture, functionality, implementation principles, and future extension points.
A background.
Debugging has always been a pain point in mobile Web development, and the industry is constantly looking for better solutions in debugging tools. The mobile Web debugging solution is proposed from the aspects of real computer debugging, JS simulation, Nodejs proxy, proxy software and so on. Mdebug is a lightweight tool for mobile Web debugging through JS simulation, without relying on any plug-ins, simple to use and powerful.
Git address: github.com/tnfe/mdebug
Quick experience: tnfe.github. IO /mdebug
Two, function introduction
Mdebug provides system, log, network, element, storage, agent, and performance functions. Let’s take a look at each of these features:
1. The system
System functions provide the current access address, UA, window size, user identification and other information, and support click copy, you can quickly understand the current system situation.
Elements of 2.
The dom element of the current page is displayed. You can quickly learn about the DOM element of the current page. You can expand and collapse the dom element, which is similar to chrome DevTools Elements.
3. Log
Supports multiple log display, log classification, global filtering, log export, js command execution, long log folding and expansion, and improves the performance of large log display.
4. The network
Support a variety of network requests to view, including static resources, interfaces, Websocket requests, and support fuzzy search.
5. Storage and cookies
Support multiple storage display, add and delete storage, fuzzy search, support long log folding expansion, improve the performance of large log display and other functions.
6. Front-end proxy
A simple version of local host that allows you to quickly change the domain name proxy through the panel and forward page requests to another domain name
7. The performance of the performance
The current performance information is displayed based on common performance monitoring indicators
Three, quick use
1. ES6
import mdebug from 'mdebug';
mdebug.init();
Copy the code
2. CDN
(function() {
var scp = document.createElement('script');
// Load the latest version of mdebug
scp.src = 'https://unpkg.com/mdebug@latest/dist/index.js';
scp.async = true;
scp.charset = 'utf-8';
// Successfully loaded and initialized
scp.onload = function() {
mdebug.init();
};
// Load state switch callback
scp.onreadystate = function() {};
// Load failed callback
scp.onerror = function() {};
document.getElementsByTagName('head') [0].appendChild(scp); }) ();Copy the code
Iv. API introduction
1. init
mdebug.init({
containerId: ' ' // mdebug Mounts the container ID. If the value is empty, a unique id is automatically generated.
plugins: [].// Pass in the mdebug plug-in
hideToolbar: [].// Pass in the TAB ID to hide
});
Copy the code
2. addPlugin
mdebug.addPlugin({
id: ' '.// tab id
name: ' '.// TAB corresponds to the Chinese title,
enName: ' '.// TAB corresponds to the English title
component: () = > {}, // The react component of the TAB
});
Copy the code
3. removePlugin
// The id of the panel that supports removal
/*
System => system;
Elements => elements;
Console => console
Application => application
NetWork => network
Performance => performance
Settings => settings
*/
mdebug.removePlugin([]);
Copy the code
4. exportLog
/* @returned {type: "// Log type source: [], // original log} @params type // type = log, return all console logs // type = net, return all net logs */
mdebug.exportLog(type);
Copy the code
5. on
mdebug.on(eventName, callback);
Copy the code
6. emit
mdebug.emit(eventName, data);
Copy the code
5. Event list
The name of the event | data | trigger |
---|---|---|
ready | object | Mdebug is loaded successfully |
addTab | object | Increase the panel |
removeTab | array | Remove the panel |
changeTab | object | Switch panel |
Vi. Introduction to mainstream debugging tools in the industry
1. Js simulation
- eruda Github.com/liriliri/er…
- vconsole Blog.csdn.net/yihanzhi/ar… Liuxianyu. Cn/article/mob…
2. Packet capture tool
- Fiddler
www.cnblogs.com/yyhh/p/5140…
- Charles www.cnblogs.com/peng-lan/p/…
www.cnblogs.com/linyfeng/p/…
- Tcpdump
Juejin. Cn/post / 684490…
- USB Aotu. IO/notes / 2017 /…
3. Nodejs proxy tool
- whistle
Segmentfault.com/a/119000001…
- LivePool
www.freebuf.com/sectool/734…
- AnyProxy
Jingyan.baidu.com/article/948…
Vii. Comparison of industry plans
Compared with js simulation debugging tools in the industry, MDEBUG has done more thinking and exploration in expansibility and user experience.
Viii. Overall structure
Nine, the implementation principle
1. Intercept the consoleRelated to the source code
The Hook Console API is used to send console logs to MDEBUG for formatting and display. In addition, it can search and export logs
2. Hook Fetch Ajax Related to the source code
Mdebug intercepts network requests, stores network request information in a memory queue, and sends related events to mDEBUG for display. At the same time, it supports global search and export of network request logs
3. Performance API
The Performance API provides information about browser page loading performance, static resource loading, and more.
(1) Page performance
Mdebug use window. Performance. Timing to get the page load performance data, and refer to the commonly used performance index calculation, provide simple and intuitive for business performance data.
(2) Static resource loading
GetEntries is used to obtain the static load of resources on a page and the mDEBUG Network panel is notified using an event mechanism.
(3) Relevant source code
Github.com/tnfe/mdebug… Github.com/tnfe/mdebug…
4. Use Redux for state management
5. Call the native storage API to get, set, and delete storage
6. In addition to redux status management, log, network data distribution notification, and communication between MDEBUG and external business logic codes are implemented through eventBus event mechanism
Ten, future expansion point
As a new exploration of mobile Web debugging tool, MDEBUG can combine more functions with business practice in the future. Through the mechanism of plug-ins, businesses can freely combine. In addition, we are also exploring the support of multiple front-end frameworks. Plug-ins can support vue, React, native JS, etc. In addition, as an introduction to React, it is also a good practical project.