{"id":13671247,"url":"https://github.com/whinc/web-console","last_synced_at":"2025-04-27T14:33:16.764Z","repository":{"id":31339906,"uuid":"127594448","full_name":"whinc/web-console","owner":"whinc","description":"✨H5-based mobile web debugging tool similar to chrome devtools. 基于H5的移动端网页调试工具，类似于chrome devtools。","archived":false,"fork":false,"pushed_at":"2022-12-12T12:32:29.000Z","size":10756,"stargazers_count":163,"open_issues_count":17,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-07T12:50:52.116Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/whinc/web-console","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/whinc.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-01T03:45:56.000Z","updated_at":"2024-09-04T14:57:32.000Z","dependencies_parsed_at":"2023-01-14T19:01:09.082Z","dependency_job_id":null,"html_url":"https://github.com/whinc/web-console","commit_stats":null,"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whinc%2Fweb-console","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whinc%2Fweb-console/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whinc%2Fweb-console/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whinc%2Fweb-console/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whinc","download_url":"https://codeload.github.com/whinc/web-console/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251154398,"owners_count":21544491,"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":[],"created_at":"2024-08-02T09:01:03.988Z","updated_at":"2025-04-27T14:33:13.849Z","avatar_url":"https://github.com/whinc.png","language":"JavaScript","readme":"# web-console\r\n\r\n![Github release](https://img.shields.io/npm/v/@whinc/web-console.svg)\r\n![总下载量](https://img.shields.io/npm/dt/@whinc/web-console.svg)\r\n![月下载量](https://img.shields.io/npm/dm/@whinc/web-console.svg)\r\n![周下载量](https://img.shields.io/npm/dw/@whinc/web-console.svg)\r\n![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@whinc/web-console.svg)\r\n![LINCENSE](https://img.shields.io/github/license/mashape/apistatus.svg)\r\n\r\nweb-console 是一款基于 H5 开发的移动端 Web 调试工具。其高度还原了 Chrome DevTools 的功能和交互，支持 webpack 打包和`\u003cscript\u003e`方式引入。\r\n\r\n在线演示：\u003chttps://whinc.github.io/web-console/\u003e\r\n\r\nCDN 地址：\u003chttps://unpkg.com/@whinc/web-console\u003e\r\n\r\n![snapshot](./docs/snapshot.png)\r\n\r\n[更多运行截图点击这里](https://github.com/whinc/web-console/blob/master/docs/snapshot.md)\r\n\r\n## 功能特性\r\n\r\nweb-console 特性列表完成情况（可能会变动）：\r\n\r\n- Element 面板\r\n  - 支持 DOM 树展示\r\n  - 支持查看 DOM 节点的继承样式\r\n  - 支持查看 DOM 节点的计算样式\r\n  - 支持查看 DOM 节点的盒模型\r\n- Console 面板\r\n  - 支持 console 对象的 log/warn/info/error/debug 方法\r\n  - 支持 log 等日志方法的多参数输出\r\n  - 支持 log 等日志方法的参数格式化输出，已支持`%s, %i, %d, %f, %d, %o, %O, %c`\r\n  - 支持日志过滤\r\n- Network 面板\r\n  - 支持`XMLHttpRequest`请求和响应的展示\r\n  - 支持`fetch`请求和响应的展示\r\n  - 支持响应数据的预览\r\n- Application 面板\r\n  - 支持 cookie、localStorage 和 sessionStorage 的增删改查\r\n  - 支持 cookie、localStorage 和 sessionStorage 按关键字过滤\r\n- Settings 面板\r\n  - 设置各面板默认行为\r\n  - 关于信息\r\n- 插件\r\n  - 支持自定义插件\r\n  - 支持插件生命周期\r\n  - 支持插件偏好设置\r\n  - 支持使用内置组件\r\n\r\n## 如何使用?\r\n\r\n### 模块化方式导入\r\n\r\n安装 npm 包\r\n\r\n```\r\nnpm install @whinc/web-console\r\n```\r\n\r\n导入 web-console 并初始化\r\n\r\n```js\r\nimport WebConsole from \"@whinc/web-console\";\r\nnew WebConsole();\r\n```\r\n\r\n或者，仅在开发模式下导入\r\n\r\n```js\r\nif (process.env.NODE_ENV === \"development\") {\r\n  import(\"@whinc/web-console\").then(WebConsole =\u003e {\r\n    new WebConsole(config);\r\n  });\r\n}\r\n```\r\n\r\n### `\u003cscript\u003e`标签导入\r\n\r\n在 html 文件中引入 web-console（依赖 Vue 2.x）\r\n\r\n```html\r\n\u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"https://unpkg.com/@whinc/web-console\"\u003e\u003c/script\u003e\r\n```\r\n\r\n通过下面代码初始化\r\n\r\n```js\r\nnew WebConsole(config);\r\n```\r\n\r\n## API\r\n\r\n`WebConsole`构造参数如下：\r\n\r\n| 字段 | 类型 | 必填 | 备注 |\r\n| --------- | ------------ | ----- | ------------------------------------ |\r\n| panelVisible | bool | false | 是否自动弹窗主面板 |\r\n| activeTab | string | 'console' | 默认激活的 Tab 面板，支持'element', 'console', 'network', 'application', 以及插件的 id |\r\n| entryStyle | string | 'button' | 入口样式，支持两种'button'和'icon' |\r\n\r\n\u003e 后续补充更多的配置参数和 API 接口\r\n\r\n## 插件开发\r\n\r\nweb-console 提供一些开箱即用的功能，如果这些无法满足你的需求，你还可以通过 web-console 提供的插件机制，添加第三方编写的插件来扩展功能。\r\n\r\n可参考下面资源：\r\n\r\n- [插件开发文档](./docs/plugin.md)\r\n- [插件项目模板](https://github.com/whinc/web-console-plugin)\r\n\r\n## 更新日志\r\n\r\n[CHANGELOG](CHANGELOG.md)\r\n\r\n## 相似项目\r\n\r\n**Web**\r\n- [vConsole](https://github.com/Tencent/vConsole) A lightweight, extendable front-end developer tool for mobile web page.\r\n- [eruda](https://github.com/liriliri/eruda) Console for mobile browsers\r\n\r\n**Native**\r\n- [wt-console](https://github.com/WeBankFinTech/wt-console) A lightweight, extendable react-native developer and tester tool\r\n\r\n## License\r\n\r\nMIT\r\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhinc%2Fweb-console","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhinc%2Fweb-console","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhinc%2Fweb-console/lists"}