English | 简体中文

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.