Nominating Presidential Muppets

    mdebug

    2.0.2 • Public • Published

    English | 简体中文

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

    简单易用

    功能全面

    易扩展

    高性能

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

    一、快速体验

    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/mdebug@latest/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 for more information.

    Keywords

    none

    Install

    npm i mdebug

    DownloadsWeekly Downloads

    44

    Version

    2.0.2

    License

    none

    Unpacked Size

    2.58 MB

    Total Files

    130

    Last publish

    Collaborators

    • ihtml5