A lightweight, easy to extend web debugging tool developed based on react.
Tags: react, html, javascript, css
Published: 2021-08-26 10:12:35

---
title: A lightweight, easy to extend web debugging tool developed based on react.
published: true
tags: react, html5, javascript, css
description: Debugging has always been a pain point for mobile web development, and the industry is constantly looking for better solutions in debugging tools. Propose mobile web debugging solutions from real machine joint debugging, js simulation, Nodejs agent, agent software, etc. mdebug is a lightweight tool that implements mobile web debugging through js simulation. It does not need to rely on any plug-ins. It is simple to use and powerful..
---

<p align="center" style="margin: 30px 0 0px;">A lightweight, easy to extend web debugging tool developed based on react
</p>
<table>
  <tr>
    <th><h4 align="center"><h4 align="center">Easy to use</h4 align="center"></th>
    <th><h4 align="center"></h4 align="center"><h4 align="center">Full-featured</h4 align="center"></th>
    <th><h4 align="center"></h4 align="center"><h4 align="center">Easy to expand</h4 align="center"></th>
    <th><h4 align="center"></h4 align="center"><h4 align="center">high performance</h4 align="center"></th>
  </tr>
  <tr>
    <td width="20%" align="center"><sub>Use the cdn method, one-click access</sub></td>
    <td width="20%" align="center"><sub>Similar to Chrome devtools, supports log, network, storage, performance, etc., has better network capture capabilities and rich log display</sub></td>
    <td width="20%" align="center"><sub>Expose rich internal events, which can be seamlessly integrated with react components</td>
    <td width="20%" align="center"><sub>Support large amount of data display, no lag</td>
  </tr>
</table>

<p align="center">
<a href="https://npmjs.org/package/mdebug" target="_blank"><img src="https://img.shields.io/npm/v/mdebug.svg" alt="NPM Version" /></a>
</p>

## github
[https://github.com/tnfe/mdebug](https://github.com/tnfe/mdebug)

## Demos

[https://tnfe.github.io/mdebug](https://tnfe.github.io/mdebug)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dam34pyl2x21s8hrhjtk.png)
 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qqctbiqcnj2muka75eu.png)

## Installation

### Install using npm 
``` 
npm install mdebug --save

```
## Useage

### 1. ES6
```javascript
  import mdebug from 'mdebug';
  mdebug.init();
```

### 2.CDN
```javascript
(function() {
    var scp = document.createElement('script');
    // Load the latest mdebug version
    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);
})();
```
## API

### 1. init
```javascript
mdebug.init({
    containerId: '' // mdebug mounts the container id, if it is empty, a unique id will be automatically generated internally,
    plugins: [], // Incoming mdebug plugin
    hideToolbar: [], // Pass in the tab id that needs to be hidden
});
```
### 2. addPlugin
```javascript
mdebug.addPlugin({
    id: '', // tab id
    name: '', // Chinese title corresponding to tab,
    enName: '', // English title corresponding to tab
    component: () => {}, // React component corresponding to tab
});
```

### 3. removePlugin
```javascript
// Support the id of the panel to be removed
/*
System => system;
Elements => elements;
Console => console
Application => application
NetWork => network
Performance => performance
Settings => settings
*/
mdebug.removePlugin([]);
```

### 4. exportLog
```javascript
/*
@returned {
  type: '' // Log type
  source: [], // Original log
}
@params type
// type is equal to log, return all console logs
// type is equal to net, return all net logs
*/
mdebug.exportLog(type);

```

### 5. on
```javascript
mdebug.on(eventName, callback);
```
### 6. emit
```javascript
mdebug.emit(eventName, data);
```

## Event list
| **Event name**     | **params**     | **Trigger timing**     |
| ---------- | :-----------:  | :-----------: |
| ready | object | mdebug loaded
| addTab | object | Add panel
| removeTab | array | Remove panel |
| changeTab | object | Panel switch|


## development

1. npm i
2. npm start
3. npm run build 


## License
The MIT License (MIT). Please see [License File](./LICENSE) for more information.