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.