Popularity
2.9
Growing
Activity
8.1
Stable
195
11
13

Description

mdebug is a mobile web debugging tool developed based on react. It is lightweight, easy to expand, and powerful. It provides system, element, network, storage, proxy, log and other functions to facilitate mobile web developers to debug applications. In addition, the project is A react practice project, also very suitable for react beginners.

Programming language: JavaScript
License: MIT License
Tags: Dev Tools     Redux     React     Component     Reactjs    
Latest version: v2021.9.17

#<Sawyer::Resource:0x00007f8b44d36950> alternatives and similar libraries

Based on the "Redux" category.
Alternatively, view mdebug alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of #<Sawyer::Resource:0x00007f8b44d36950> or a related project?

Add another 'Redux' Library

README

[English](./README.en.md) | 简体中文

基于React开发的移动web调试工具 更新日志

简单易用 功能全面 易扩展 高性能 使用cdn方式,一键接入 类Chrome devtools, 内嵌React开发者工具,支持日志,网络,元素,代理,存储,性能等, 具有更好的网络捕获能力和丰富的日志展现形式 暴露内部丰富的事件, 可以和react组件无缝进行集成 支持大数据量展示, 不卡顿

一、快速体验

https://tnfe.github.io/mdebug

image

二、Examples

  • Vanilla

Edit crimson-sun-py8x7

三、安装

Install using npm

npm install mdebug --save

四、使用

1. ES6

  import mdebug from 'mdebug';
  mdebug.init();

2.CDN

(function() {
    var scp = document.createElement('script');
    // 加载最新的mdebug版本
    scp.src = 'https://unpkg.com/[email protected]/dist/index.js';
    scp.async = true;
    scp.charset = 'utf-8';
    // 加载成功并初始化
    scp.onload = function() {
        mdebug.init();
    };
    // 加载状态切换回调
    scp.onreadystate = function() {};
    // 加载失败回调 
    scp.onerror = function() {};
    document.getElementsByTagName('head')[0].appendChild(scp);
})();

五、API

1. init

mdebug.init({
    containerId: '' // mdebug挂载容器id, 如果传空, 内部会自动生成一个不重复的id,
    plugins: [], // 传入mdebug插件
    hideToolbar: [], // 传入需要隐藏的tab id
});

2. addPlugin

mdebug.addPlugin({
    id: '', // tab id
    name: '', // tab对应的中文title,
    enName: '', // tab对应的英文title
    component: () => {}, // tab对应的react组件
});

3. removePlugin

// 支持移除的panel对应的id
/*
System => system;
Elements => elements;
Console => console
Application => application
NetWork => network
Performance => performance
Settings => settings
*/
mdebug.removePlugin([]);

4. exportLog

/*
@returned {
  type: '' // 日志类型
  source: [], // 原始日志
}
@params type
// type等于log, 返回所有的console日志
// type等于net, 返回所有的net日志
*/
mdebug.exportLog(type);

5. on

mdebug.on(eventName, callback);

6. emit

mdebug.emit(eventName, data);

六、事件列表

事件名称 数据 触发时机
ready object mdebug加载完毕
addTab object 增加面板
removeTab array 移除面板
changeTab object 面板切换

七、开发

  1. npm i
  2. npm start // 启动开发
  3. npm run build //打包
  4. npm run test // 单元测试

八、相关文章

  1. 移动端前端开发调试
  2. Chrome 开发者工具

九、相关项目

  1. eruda
  2. vConsole
  3. react-json-tree
  4. 基于React的移动端调试解决方案
  5. a useful debugger for mobile
  6. autoDevTools
  7. react-inspector
  8. web-console
  9. ChromeDevTools

十、License

The MIT License (MIT). Please see [License File](./LICENSE) for more information.


*Note that all licence references and agreements mentioned in the #<Sawyer::Resource:0x00007f8b44d36950> README section above are relevant to that project's source code only.