DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

html5@mobile
html5@mobile

Posted on • Updated on

A lightweight, easy to extend web debugging tool developed based on react.

A lightweight, easy to extend web debugging tool developed based on react

Easy to use

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

NPM Version

github

https://github.com/tnfe/mdebug

Demos

https://tnfe.github.io/mdebug

image

image

Installation

Install using npm

npm install mdebug --save

Enter fullscreen mode Exit fullscreen mode

Useage

1. ES6

  import mdebug from 'mdebug';
  mdebug.init();
Enter fullscreen mode Exit fullscreen mode

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);
})();
Enter fullscreen mode Exit fullscreen mode

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
});
Enter fullscreen mode Exit fullscreen mode

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
});
Enter fullscreen mode Exit fullscreen mode

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([]);
Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

5. on

mdebug.on(eventName, callback);
Enter fullscreen mode Exit fullscreen mode

6. emit

mdebug.emit(eventName, data);
Enter fullscreen mode Exit fullscreen mode

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 for more information.

Top comments (2)

Collapse
 
ihtml5 profile image
html5@mobile

Feedback is welcome

Collapse
 
ihtml5 profile image
html5@mobile

welcome to contribute

The Complete Guide to Full Stack Web3 Development

The most important tools, protocols, and frameworks for building full stack web3 apps, and most importantly - how to put everything together to lay the groundwork for building out any of your own ideas in the future.