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

简单易用

功能全面

易扩展

高性能

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

一、快速体验

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');
    // 加载最新的mdebug版本
    scp.src = 'https://new.inews.gtimg.com/tnews/9d243fb8/a1f8/9d243fb8-a1f8-4bf7-9047-dfa01d8c9ca0.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);

五、事件列表

事件名称

数据

触发时机

readyobjectmdebug加载完毕
addTabobject增加面板
removeTabarray移除面板
changeTabobject面板切换

六、开发

  1. npm i
  2. npm start // 启动开发
  3. npm run build //打包

七、Articles

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

八、Projects

  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 for more information.