Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ihtml5/mdebug
基于React开发的新一代web调试工具，支持React组件调试，类似于Chrome Devtools。A Lightweight, Easy To Extend Web Debugging Tool Build With React
https://github.com/ihtml5/mdebug
browser console cookie css devtools eruda es6 html5 inspector javascript mdebug mobile nodejs react tabs vconsole
Last synced: 5 days ago
JSON representation
基于React开发的新一代web调试工具，支持React组件调试，类似于Chrome Devtools。A Lightweight, Easy To Extend Web Debugging Tool Build With React
- Host: GitHub
- URL: https://github.com/ihtml5/mdebug
- Owner: ihtml5
- License: mit
- Created: 2021-08-25T08:30:19.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-01-08T08:05:55.000Z (about 1 year ago)
- Last Synced: 2025-01-01T12:10:33.107Z (12 days ago)
- Topics: browser, console, cookie, css, devtools, eruda, es6, html5, inspector, javascript, mdebug, mobile, nodejs, react, tabs, vconsole
- Language: JavaScript
- Homepage: https://ihtml5.github.io/mdebug
- Size: 1.37 MB
- Stars: 256
- Watchers: 12
- Forks: 17
- Open Issues: 5
-
Metadata Files:
- Readme: README.en.md
- Changelog: CHANGELOG.EN.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - mdebug
README
English | [简体中文](./README.md)
A Lightweight, Easy To Extend Web Debugging Tool Build With React CHANGELOG
Easy to use
Full-featured
Easy to expand
high performance
Use the cdn method, one-click access
Chrome devtools-like, built-in React developer tools, support log, network, element, proxy, storage, performance, etc., have better network capture capabilities and rich log display forms
Expose rich internal events, which can be seamlessly integrated with react components
Support large amount of data display, no lag
## Demos
https://tnfe.github.io/mdebug
## Examples
+ Vanilla
[](https://codesandbox.io/s/crimson-sun-py8x7?fontsize=14&hidenavigation=1&theme=dark)
## 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
## Projects
1. [eruda](https://github.com/liriliri/eruda)
2. [vConsole](https://github.com/Tencent/vConsole)
3. [react-json-tree](https://github.com/alexkuz/react-json-tree)
4. [React-based mobile debugging solution](https://github.com/abell123456/mdebug)
5. [a useful debugger for mobile](https://github.com/ghking1/mdebug)
6. [autoDevTools](https://github.com/chokcoco/autoDevTools)
7. [react-inspector](https://github.com/xyc/react-inspector)
8. [web-console](https://github.com/whinc/web-console)
9. [ChromeDevTools](https://github.com/ChromeDevTools/devtools-frontend)
## License
The MIT License (MIT). Please see [License File](./LICENSE) for more information.