August 26, 2021 10:12 am GMT
Original Link: https://dev.to/ihtml5/mobile-web-debugging-tool-developed-based-on-react-116f
Mobile web debugging tool developed based on react
Mobile web debugging tool developed based on react
| 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
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 name | params | Trigger timing |
---|---|---|
ready | object | mdebug loaded |
addTab | object | Add panel |
removeTab | array | Remove panel |
changeTab | object | Panel switch |
development
- npm i
- npm start
- 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:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To