README.en.md

English | 简体中文

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

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

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

Projects

1. eruda
2. vConsole
3. react-json-tree
4. React-based mobile debugging solution
5. a useful debugger for mobile
6. autoDevTools
7. react-inspector
8. web-console
9. ChromeDevTools

License

The MIT License (MIT). Please see License File for more information.