{"id":13395421,"url":"https://github.com/Tencent/vConsole","last_synced_at":"2025-03-13T20:32:12.396Z","repository":{"id":37396699,"uuid":"57180853","full_name":"Tencent/vConsole","owner":"Tencent","description":"A lightweight, extendable front-end developer tool for mobile web page.","archived":false,"fork":false,"pushed_at":"2024-06-14T10:36:26.000Z","size":5266,"stargazers_count":16996,"open_issues_count":102,"forks_count":2955,"subscribers_count":304,"default_branch":"dev","last_synced_at":"2025-03-05T03:02:01.037Z","etag":null,"topics":["console","mobile","wechat"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tencent.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":"2016-04-27T03:33:45.000Z","updated_at":"2025-03-04T12:35:12.000Z","dependencies_parsed_at":"2024-06-18T10:57:05.315Z","dependency_job_id":"4d6232a4-3c34-4b0e-a06a-da9d3d72aa8e","html_url":"https://github.com/Tencent/vConsole","commit_stats":{"total_commits":752,"total_committers":68,"mean_commits":"11.058823529411764","dds":0.6662234042553192,"last_synced_commit":"05d80398bae35e793774f74e3c052b4e530e293a"},"previous_names":["wechatfe/vconsole"],"tags_count":61,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2FvConsole","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2FvConsole/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2FvConsole/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2FvConsole/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tencent","download_url":"https://codeload.github.com/Tencent/vConsole/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242951167,"owners_count":20211572,"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":["console","mobile","wechat"],"created_at":"2024-07-30T17:01:57.699Z","updated_at":"2025-03-13T20:32:11.973Z","avatar_url":"https://github.com/Tencent.png","language":"TypeScript","readme":"English | [简体中文](./README_CN.md)\n\nvConsole\n===\n\nA lightweight, extendable front-end developer tool for mobile web page.\n\nvConsole is framework-free, you can use it in Vue or React or any other framework application.\n\nNow vConsole is the official debugging tool for WeChat Miniprograms.\n\n---\n\n## Features\n\n- Logs: `console.log|info|error|...`\n- Network: `XMLHttpRequest`, `Fetch`, `sendBeacon`\n- Element: HTML elements tree\n- Storage: `Cookies`, `LocalStorage`, `SessionStorage`\n- Execute JS command manually\n- Custom plugins\n\nFor details, please see the screenshots below.\n\n---\n\n## Release Notes\n\nLatest version: [![npm version](https://img.shields.io/npm/v/vconsole/latest.svg)](https://www.npmjs.com/package/vconsole)\n\nDetailed release notes for each version are available on [Changelog](./CHANGELOG.md).\n\n---\n\n## Guide\n\nSee [Tutorial](./doc/tutorial.md) for more usage details.\n\nFor installation, there are 2 primary ways of adding vConsole to a project:\n\n#### Method 1: Using npm (Recommended)\n\n```bash\n$ npm install vconsole\n```\n\n```javascript\nimport VConsole from 'vconsole';\n\nconst vConsole = new VConsole();\n// or init with options\nconst vConsole = new VConsole({ theme: 'dark' });\n\n// call `console` methods as usual\nconsole.log('Hello world');\n\n// remove it when you finish debugging\nvConsole.destroy();\n```\n\n#### Method 2: Using CDN in HTML:\n\n```html\n\u003cscript src=\"https://unpkg.com/vconsole@latest/dist/vconsole.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  // VConsole will be exported to `window.VConsole` by default.\n  var vConsole = new window.VConsole();\n\u003c/script\u003e\n```\n\nAvailable CDN:\n\n- https://unpkg.com/vconsole@latest/dist/vconsole.min.js\n- https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js\n\n---\n\n## Preview\n\n[http://wechatfe.github.io/vconsole/demo.html](http://wechatfe.github.io/vconsole/demo.html)\n\n![](./doc/screenshot/qrcode.png)\n\n---\n\n## Screenshots\n\n### Overview\n\n\u003cdetails\u003e\n  \u003csummary\u003eLight theme\u003c/summary\u003e\n\n![](./doc/screenshot/overview_light.jpg)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eDark theme\u003c/summary\u003e\n\n![](./doc/screenshot/overview_dark.jpg)\n\u003c/details\u003e\n\n### Log Panel\n\n\u003cdetails\u003e\n  \u003csummary\u003eLog styling\u003c/summary\u003e\n\n![](./doc/screenshot/plugin_log_types.jpg)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eCommand line\u003c/summary\u003e\n\n![](./doc/screenshot/plugin_log_command.jpg)\n\u003c/details\u003e\n\n### System Panel\n\n\u003cdetails\u003e\n  \u003csummary\u003ePerformance info\u003c/summary\u003e\n\n![](./doc/screenshot/plugin_system.jpg)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eOutput logs to different panel\u003c/summary\u003e\n\n```javascript\nconsole.log('output to Log panel.')\nconsole.log('[system]', 'output to System panel.')\n```\n\u003c/details\u003e\n\n### Network Panel\n\n\u003cdetails\u003e\n  \u003csummary\u003eRequest details\u003c/summary\u003e\n\n![](./doc/screenshot/plugin_network.jpg)\n\u003c/details\u003e\n\n### Element Panel\n\n\u003cdetails\u003e\n  \u003csummary\u003eRealtime HTML elements structure\u003c/summary\u003e\n\n![](./doc/screenshot/plugin_element.jpg)\n\u003c/details\u003e\n\n### Storage Panel\n\n\u003cdetails\u003e\n  \u003csummary\u003eAdd, edit, delete or copy Cookies / LocalStorage / SessionStorage\u003c/summary\u003e\n\n![](./doc/screenshot/plugin_storage.jpg)\n\u003c/details\u003e\n\n---\n\n## Documentation\n\nvConsole:\n\n - [Tutorial](./doc/tutorial.md)\n - [Public Properties \u0026 Methods](./doc/public_properties_methods.md)\n - [Builtin Plugin: Properties \u0026 Methods](./doc/plugin_properties_methods.md)\n\nCustom Plugin:\n\n - [Plugin: Getting Started](./doc/plugin_getting_started.md)\n - [Plugin: Building a Plugin](./doc/plugin_building_a_plugin.md)\n - [Plugin: Event List](./doc/plugin_event_list.md)\n\n---\n\n## Third-party Plugins\n\n - [vConsole-sources](https://github.com/WechatFE/vConsole-sources)\n - [vconsole-webpack-plugin](https://github.com/diamont1001/vconsole-webpack-plugin)\n - [vconsole-stats-plugin](https://github.com/smackgg/vConsole-Stats)\n - [vconsole-vue-devtools-plugin](https://github.com/Zippowxk/vue-vconsole-devtools)\n - [vconsole-outputlog-plugin](https://github.com/sunlanda/vconsole-outputlog-plugin)\n - [vite-plugin-vconsole](https://github.com/vadxq/vite-plugin-vconsole)\n\n---\n\n## Feedback\n\nQQ Group: 497430533\n\n![](./doc/screenshot/qq_group.png)\n\n---\n\n## License\n\n[The MIT License](./LICENSE)\n","funding_links":[],"categories":["HarmonyOS","TypeScript","JavaScript","mobile","前端开发框架及项目","Uncategorized","工具","Projects List","7. 调试"],"sub_categories":["Windows Manager","其他_文本生成、文本对话","Uncategorized","调试","7.2 web调试"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTencent%2FvConsole","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTencent%2FvConsole","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTencent%2FvConsole/lists"}