10

Mobile web debugging tool developed based on react

 3 years ago
source link: https://dev.to/ihtml5/mobile-web-debugging-tool-developed-based-on-react-116f
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Mobile web debugging tool developed based on react

Aug 26

・2 min read

130725631-dde49c00-24fe-44c6-a3fd-a5c709ce6e57.png

Mobile 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

github

https://github.com/tnfe/mdebug

Demos

https://tnfe.github.io/mdebug

Installation

Install using npm 

npm install mdebug --save
Enter fullscreen modeExit fullscreen mode

Useage

1. ES6 

  import mdebug from 'mdebug';
  mdebug.init();
Enter fullscreen modeExit 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 modeExit fullscreen mode

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 modeExit 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 modeExit 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 modeExit 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 modeExit fullscreen mode
mdebug.on(eventName, callback);
Enter fullscreen modeExit fullscreen mode

6. emit 

mdebug.emit(eventName, data);
Enter fullscreen modeExit 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 start
  2. npm run build

License

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

Discussion (1)

pic

CollapseExpand

Author

•

Aug 26

Feedback is welcome

Comment button Reply


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK