mdebug
A lightweight, easy to extend web debugging tool developed based on react.
|
Full-featured |
Easy to expand |
high performance |
|---|---|---|---|
| Use the cdn method, one-click access | Similar to Chrome devtools, supports log, network, storage, performance, etc., has better network capture capabilities and rich log display | Expose rich internal events, which can be seamlessly integrated with react components | Support large amount of data display, no lag |
Examples
- Vanilla
Installation
Install using npm
npm install mdebug --save
Useage
1. ES6
import mdebug from 'mdebug';
mdebug.init();
2.CDN
(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
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
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
// 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
/*
@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
mdebug.on(eventName, callback);
6. emit
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
- npm i
- npm start
- npm run build
