tool

A Lightweight, Easy To Extend Web Debugging Tool Build With React

Aug 28, 2021
A Lightweight, Easy To Extend Web Debugging Tool Build With React

mdebug

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 accessSimilar to Chrome devtools, supports log, network, storage, performance, etc., has better network capture capabilities and rich log displayExpose rich internal events, which can be seamlessly integrated with react componentsSupport large amount of data display, no lag

View Demo View Github

Examples

  • Vanilla

Edit crimson-sun-py8x7

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/[email protected]/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 nameparamsTrigger timing
readyobjectmdebug loaded
addTabobjectAdd panel
removeTabarrayRemove panel
changeTabobjectPanel 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
Recommended