Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 26, 2021 10:12 am GMT

Mobile web debugging tool developed based on react

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

NPM VersionPRsNode Version

github

https://github.com/tnfe/mdebug

Demos

https://tnfe.github.io/mdebug

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 => consoleApplication => applicationNetWork => networkPerformance => performanceSettings => 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 nameparamsTrigger timing
readyobjectmdebug loaded
addTabobjectAdd panel
removeTabarrayRemove panel
changeTabobjectPanel switch

development

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

License

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


Original Link: https://dev.to/ihtml5/mobile-web-debugging-tool-developed-based-on-react-116f

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To