{"id":13670728,"url":"https://github.com/ihtml5/mdebug","last_synced_at":"2025-04-09T09:06:27.103Z","repository":{"id":40344504,"uuid":"399745982","full_name":"ihtml5/mdebug","owner":"ihtml5","description":"基于React开发的新一代web调试工具，支持React组件调试，类似于Chrome Devtools。A Lightweight, Easy To Extend Web Debugging Tool Build With React","archived":false,"fork":false,"pushed_at":"2024-01-08T08:05:55.000Z","size":1435,"stargazers_count":259,"open_issues_count":5,"forks_count":16,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-02T06:07:37.638Z","etag":null,"topics":["browser","console","cookie","css","devtools","eruda","es6","html5","inspector","javascript","mdebug","mobile","nodejs","react","tabs","vconsole"],"latest_commit_sha":null,"homepage":"https://ihtml5.github.io/mdebug","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ihtml5.png","metadata":{"files":{"readme":"README.en.md","changelog":"CHANGELOG.EN.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-25T08:30:19.000Z","updated_at":"2025-03-08T13:25:20.000Z","dependencies_parsed_at":"2024-01-14T16:29:50.798Z","dependency_job_id":null,"html_url":"https://github.com/ihtml5/mdebug","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ihtml5%2Fmdebug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ihtml5%2Fmdebug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ihtml5%2Fmdebug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ihtml5%2Fmdebug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ihtml5","download_url":"https://codeload.github.com/ihtml5/mdebug/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008630,"owners_count":21032556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","console","cookie","css","devtools","eruda","es6","html5","inspector","javascript","mdebug","mobile","nodejs","react","tabs","vconsole"],"created_at":"2024-08-02T09:00:48.623Z","updated_at":"2025-04-09T09:06:27.081Z","avatar_url":"https://github.com/ihtml5.png","language":"JavaScript","readme":"English | [简体中文](./README.md)\n\u003ch1 align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/6822604/130725631-dde49c00-24fe-44c6-a3fd-a5c709ce6e57.png\" width=\"40%\"/\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\" style=\"margin: 30px 0 0px;\"\u003eA Lightweight, Easy To Extend Web Debugging Tool Build With React  \u003ca href=\"https://github.com/tnfe/mdebug/blob/master/CHANGELOG.EN.md\"\u003eCHANGELOG\u003c/a\u003e\u003c/p\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u003ch4 align=\"center\"\u003e\u003ch4 align=\"center\"\u003eEasy to use\u003c/h4 align=\"center\"\u003e\u003c/th\u003e\n    \u003cth\u003e\u003ch4 align=\"center\"\u003e\u003c/h4 align=\"center\"\u003e\u003ch4 align=\"center\"\u003eFull-featured\u003c/h4 align=\"center\"\u003e\u003c/th\u003e\n    \u003cth\u003e\u003ch4 align=\"center\"\u003e\u003c/h4 align=\"center\"\u003e\u003ch4 align=\"center\"\u003eEasy to expand\u003c/h4 align=\"center\"\u003e\u003c/th\u003e\n    \u003cth\u003e\u003ch4 align=\"center\"\u003e\u003c/h4 align=\"center\"\u003e\u003ch4 align=\"center\"\u003ehigh performance\u003c/h4 align=\"center\"\u003e\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"20%\" align=\"center\"\u003e\u003csub\u003eUse the cdn method, one-click access\u003c/sub\u003e\u003c/td\u003e\n    \u003ctd width=\"20%\" align=\"center\"\u003e\u003csub\u003eChrome devtools-like, \u003cstrong\u003ebuilt-in React developer tools\u003c/strong\u003e, support log, network, element, proxy, storage, performance, etc., have better network capture capabilities and rich log display forms\u003c/sub\u003e\u003c/td\u003e\n    \u003ctd width=\"20%\" align=\"center\"\u003e\u003csub\u003eExpose rich internal events, which can be seamlessly integrated with react components\u003c/td\u003e\n    \u003ctd width=\"20%\" align=\"center\"\u003e\u003csub\u003eSupport large amount of data display, no lag\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://npmjs.org/package/mdebug\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/mdebug.svg\" alt=\"NPM Version\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/tnfe/mdebug/pulls\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://nodejs.org\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/node-%3E%3D%208.0.0-brightgreen.svg\" alt=\"Node Version\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n## Demos\n\nhttps://tnfe.github.io/mdebug\n\n![image](https://user-images.githubusercontent.com/6822604/131059931-7efb7494-82fe-4a27-bd79-ed2bd9ce2c11.png)\n\n\u003cimg src=\"https://user-images.githubusercontent.com/6822604/131216593-59803c8f-1819-4907-b02a-e4bad0c1666b.png\" width=\"40%\"/\u003e\n\n## Examples\n\n+ Vanilla\n\n[![Edit crimson-sun-py8x7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/crimson-sun-py8x7?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n\n## Installation\n\n#### Install using npm \n``` \nnpm install mdebug --save\n\n```\n## Useage\n\n### 1. ES6\n```javascript\n  import mdebug from 'mdebug';\n  mdebug.init();\n```\n\n### 2.CDN\n```javascript\n(function() {\n    var scp = document.createElement('script');\n    // Load the latest mdebug version\n    scp.src = 'https://unpkg.com/mdebug@latest/dist/index.js';\n    scp.async = true;\n    scp.charset = 'utf-8';\n    // Successfully loaded and initialized\n    scp.onload = function() {\n        mdebug.init();\n    };\n    // Load state switch callback\n    scp.onreadystate = function() {};\n    // Load failed callback \n    scp.onerror = function() {};\n    document.getElementsByTagName('head')[0].appendChild(scp);\n})();\n```\n## API\n\n### 1. init\n```javascript\nmdebug.init({\n    containerId: '' // mdebug mounts the container id, if it is empty, a unique id will be automatically generated internally,\n    plugins: [], // Incoming mdebug plugin\n    hideToolbar: [], // Pass in the tab id that needs to be hidden\n});\n```\n### 2. addPlugin\n```javascript\nmdebug.addPlugin({\n    id: '', // tab id\n    name: '', // Chinese title corresponding to tab,\n    enName: '', // English title corresponding to tab\n    component: () =\u003e {}, // React component corresponding to tab\n});\n```\n\n### 3. removePlugin\n```javascript\n// Support the id of the panel to be removed\n/*\nSystem =\u003e system;\nElements =\u003e elements;\nConsole =\u003e console\nApplication =\u003e application\nNetWork =\u003e network\nPerformance =\u003e performance\nSettings =\u003e settings\n*/\nmdebug.removePlugin([]);\n```\n\n### 4. exportLog\n```javascript\n/*\n@returned {\n  type: '' // Log type\n  source: [], // Original log\n}\n@params type\n// type is equal to log, return all console logs\n// type is equal to net, return all net logs\n*/\nmdebug.exportLog(type);\n\n```\n\n### 5. on\n```javascript\nmdebug.on(eventName, callback);\n```\n### 6. emit\n```javascript\nmdebug.emit(eventName, data);\n```\n\n## Event list\n| **Event name**     | **params**     | **Trigger timing**     |\n| ---------- | :-----------:  | :-----------: |\n| ready | object | mdebug loaded\n| addTab | object | Add panel\n| removeTab | array | Remove panel |\n| changeTab | object | Panel switch|\n\n\n## development\n\n1. npm i\n2. npm start\n3. npm run build \n## Projects\n1. [eruda](https://github.com/liriliri/eruda)\n2. [vConsole](https://github.com/Tencent/vConsole)\n3. [react-json-tree](https://github.com/alexkuz/react-json-tree)\n4. [React-based mobile debugging solution](https://github.com/abell123456/mdebug)\n5. [a useful debugger for mobile](https://github.com/ghking1/mdebug)\n6. [autoDevTools](https://github.com/chokcoco/autoDevTools)\n7. [react-inspector](https://github.com/xyc/react-inspector)\n8. [web-console](https://github.com/whinc/web-console)\n9. [ChromeDevTools](https://github.com/ChromeDevTools/devtools-frontend)\n\n## License\nThe MIT License (MIT). Please see [License File](./LICENSE) for more information.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fihtml5%2Fmdebug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fihtml5%2Fmdebug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fihtml5%2Fmdebug/lists"}