{"_id":"@atomicservice/ascf-console","name":"@atomicservice/ascf-console","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@atomicservice/ascf-console","version":"1.0.0","description":"功能全面、界面与体验对标 Chrome devtools 的可定制化的跨平台小程序开发调试面板","main":"dist/npm/main/index.js","miniprogram":"dist/npm","scripts":{"lint:style":"pnpm stylelint 'src/**/*.scss'","lint:es":"pnpm eslint 'src/**/*.ts' 'build/**/*.js' '*.js'","fix:es":"pnpm eslint 'src/**/*.ts' 'build/**/*.js' '*.js' --fix","fix:style":"pnpm stylelint 'src/**/*.scss' --fix","lint":"pnpm lint:es","build:scripts":"rimraf ./scripts-dist && tsc -p ./scripts/tsconfig.json","build:before":"pnpm lint && pnpm build:scripts","build:wx":"pnpm build:before && rimraf ./dist/full && rimraf ./dist/npm && cross-env BUILD_TARGET=wx node ./scripts-dist/cli.js","build:swan":"pnpm build:before && rimraf ./dist/swan/full && rimraf ./dist/swan/npm && cross-env BUILD_TARGET=swan node ./scripts-dist/cli.js","build:my":"pnpm build:before && rimraf ./dist/alipay && cross-env BUILD_TARGET=my node ./scripts-dist/cli.js","build:qq":"pnpm build:before && rimraf ./dist/qq && cross-env BUILD_TARGET=qq node ./scripts-dist/cli.js","build:xhs":"pnpm build:before && rimraf ./dist/xhs && cross-env BUILD_TARGET=xhs node ./scripts-dist/cli.js","build:ascf":"rimraf ./dist/ascf & cross-env BUILD_TARGET=ascf node ./scripts-dist/cli.js","build":"pnpm build:wx && pnpm build:my && pnpm build:xhs && pnpm build:swan","dev":"pnpm tsc --outDir ./dist/full -w && node ./build/watch.js","beta":"npm publish --tag=beta","pub":"npm publish --tag=latest","release":"npm run build:ascf && npm pack","upgrade":"pnpm ncu -u"},"keywords":["weconsole","小程序调试工具","mpdebugger","console","debug","debug","devtools","小程序","miniprogram"],"author":{"name":"weimob","email":"weimob-tech@weimob.com"},"license":"MIT","devDependencies":{"@cross-virtual-list/mp-wx":"0.3.3","typescript":"^5.1.6","@babel/core":"^7.22.9","@babel/preset-env":"^7.22.9","@mpkit/mpxml-parser":"^1.1.2","@rollup/plugin-alias":"^5.1.0","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^25.0.2","@rollup/plugin-node-resolve":"^15.1.0","@rollup/plugin-replace":"^5.0.2","@rollup/plugin-typescript":"^11.1.6","@types/node":"^20.11.6","@typescript-eslint/eslint-plugin":"^6.4.0","@typescript-eslint/parser":"^6.4.0","autoprefixer":"^10.4.15","copy":"^0.3.2","cross-env":"^7.0.3","cssnano":"^6.0.1","eslint":"^8.47.0","eslint-config-alloy":"^5.1.1","eslint-config-standard":"^17.1.0","eslint-plugin-import":"^2.28.0","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^6.1.1","forgiving-xml-parser":"^1.4.2","fse":"^4.0.1","junk":"3.1.0","node-sass":"^9.0.0","npm-check-updates":"^16.11.1","postcss":"^8.4.27","relative":"^3.0.2","rimraf":"^5.0.5","rollup":"^3.26.2","stylelint":"^15.10.2","stylelint-config-recess-order":"^4.3.0","stylelint-config-standard":"^34.0.0","stylelint-order":"^6.0.3","stylelint-scss":"^5.1.0","terser":"^5.19.2","tslib":"^2.6.2","unplugin-swc":"^1.3.2","watch":"^1.0.2"},"dependencies":{"@cross-virtual-list/core":"0.3.3","@cross-virtual-list/types":"0.3.3","@mpkit/func-helper":"^1.1.2","@mpkit/types":"^1.1.2","@mpkit/util":"^1.1.2","cross-mp-power":"0.2.2","typescript-mp-component":"0.1.1"},"_id":"@atomicservice/ascf-console@1.0.0","_integrity":"sha512-BlsCScBFkyFShlYpyFkBsMRVFDZdDCIF+Mm1OwkPO0YfDqXUwsqURWF93x+sN+Z6Iw2umW5OfXiPDt0DD9CV3w==","_resolved":"/Users/susan/Desktop/AscfConsole/atomicservice-ascf-console-1.0.0.tgz","_from":"file:atomicservice-ascf-console-1.0.0.tgz","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-BlsCScBFkyFShlYpyFkBsMRVFDZdDCIF+Mm1OwkPO0YfDqXUwsqURWF93x+sN+Z6Iw2umW5OfXiPDt0DD9CV3w==","shasum":"40e9f5135e8d5dd77288624a2cbf597cd0307217","tarball":"https://registry.npmjs.org/@atomicservice/ascf-console/-/ascf-console-1.0.0.tgz","fileCount":232,"unpackedSize":874560,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDlb0b3s4kxKBL5Yv+9h4AUqSday5/uGv18hm3aRFhcYAiAlPWR+USLESmjj9zbUk8g15Om5qQf3oX7N8xpSUWjvQg=="}]},"_npmUser":{"name":"atomicservice","email":"tuxiaozhou@h-partners.com"},"directories":{},"maintainers":[{"name":"atomicservice","email":"tuxiaozhou@h-partners.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ascf-console_1.0.0_1777534116260_0.6552090719545427"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-30T07:28:36.158Z","1.0.0":"2026-04-30T07:28:36.425Z","modified":"2026-04-30T07:28:36.650Z"},"maintainers":[{"name":"atomicservice","email":"tuxiaozhou@h-partners.com"}],"description":"功能全面、界面与体验对标 Chrome devtools 的可定制化的跨平台小程序开发调试面板","keywords":["weconsole","小程序调试工具","mpdebugger","console","debug","debug","devtools","小程序","miniprogram"],"author":{"name":"weimob","email":"weimob-tech@weimob.com"},"license":"MIT","readme":"# WeConsole——功能全面、界面与体验对标 Chrome devtools 的可定制化的跨平台小程序开发调试面板\n\n[](https://www.npmjs.com/package/weconsole)\n[](https://www.npmjs.com/package/weconsole)\n[](https://www.npmjs.com/package/weconsole)\n[](https://standardjs.com)\n\n\n\n# 主要功能特性\n\n- ✅ 展示 Console 日志\n- ✅ 展示小程序组件节点树\n- ✅ 展示网络请求\n- ✅ 展示小程序 API 调用记录\n- ✅ 展示数据缓存\n- ✅ 支持自定义扩展\n- ✅ 跨平台\n - ✅ 微信小程序\n - ✅ 支付宝小程序\n - ✅ 百度小程序\n - 🚫 QQ 小程序\n - 🚫 字节跳动小程序\n - 🚫 快手小程序\n - ✅ 小红书小程序\n\n# 一、背景与简介\n\n在传统的 PC Web 前端开发中，浏览器为开发者提供了体验良好、功能丰富且强大的开发调试工具，比如常见的 Chrome devtools 等，这些调试工具极大的方便了开发者，它们普遍提供查看页面结构、监听网络请求、管理本地数据存储、debugger 代码、使用 Console 快速显示数据等功能。\n\n但是在近几年兴起的微信小程序的前端开发中，却少有类似的体验和功能对标的开发调试工具出现。当然微信小程序的官方也提供了类似的工具，那就是 vConsole，但是相比 PC 端提供的工具来说确实无论是功能和体验都有所欠缺，所以我们开发了 weconsole 来提供更加全面的功能和更好的体验。\n\n基于上述背景，我们（**起初**）想开发一款运行在微信小程序环境上（**目前可运行与多个小程序平台**），无论在用户体验还是功能等方面都能媲美 PC 端的前端开发调试工具，当然某些（如 debugger 代码等）受限于技术在当前时期无法实现的功能我们暂且忽略。\n\n我们将这款工具命名为`Weimob Console`，简写为`WeConsole`。\n\n
\n\n# 二、安装与使用\n\n\n查看步骤：
\n\n## 1、通过 npm 安装\n\n```bash\nnpm i weconsole -S\n```\n\n## 2、普通方式安装\n\n> 此方式会将`WeConsole`依赖的所有 npm 代码包都自动引入，无需再通过开发者工具进行 npm 编译。\n\n可将 npm 包下载到本地，然后：\n\n- `微信小程序`：请将`dist/full`目录中的文件拷贝至项目目录中；\n- `支付宝小程序`：请将`dist/alipay/full`目录中的文件拷贝至项目目录中；\n- `小红书小程序`：请将`dist/xhs/full`目录中的文件拷贝至项目目录中；\n- `百度小程序`：请将`dist/swan/full`目录中的文件拷贝至项目目录中；\n\n## 3、引用\n\nWeConsole 分为`核心`和`组件`两部分，使用时需要全部引用后方可使用：\n\n- `核心`负责重写系统变量或方法，以达到全局监控的目的；\n- `组件`负责将监控的数据显示出来。\n\n### 3.1 在`app.js`文件中引用`核心`：\n\n- `微信小程序`引用方式：\n\n```javascript\n// NPM方式引用\nimport 'weconsole/main/init';\n\n// 普通方式引用\nimport '{复制后的【dist/full】的路径}/main/init';\n```\n\n- `支付宝小程序`引用方式：\n\n```javascript\n// NPM方式引用\nimport 'weconsole/dist/alipay/npm/main/init';\n\n// 普通方式引用\nimport '{复制后的【dist/alipay/full】的路径}/main/init';\n```\n\n- `小红书小程序`引用方式：\n\n```javascript\n// NPM方式引用\nimport 'weconsole/dist/xhs/npm/main/init';\n\n// 普通方式引用\nimport '{复制后的【dist/xhs/full】的路径}/main/init';\n```\n\n- `百度小程序`引用方式：\n\n```javascript\n// NPM方式引用\nimport 'weconsole/dist/swan/npm/main/init';\n\n// 普通方式引用\nimport '{复制后的【dist/swan/full】的路径}/main/init';\n```\n\n引入`main/init`后，就是默认将 App、Page、Component、Api、Console 全部重写监控！如果想按需重写，可以使用如下方式进行：\n\n```javascript\nimport { replace, restore, showWeConsole, hideWeConsole } from '{NPM或复制后的【dist/full】的路径}/main/index';\n\n// scope可选值：App/Page/Component/Console/Api\n// 按需替换系统变量或函数以达到监控\nreplace(scope);\n\n// 可还原\nrestore(scope);\n\n// 通过show/hide方法控制显示入口图标\nshowWeConsole();\n```\n\n> 如果没有显式调用过`showWeConsole/hideWeConsole`方法，组件第一次初始化时，会根据根据小程序当前状态综合判断入口图标的显示性，这些规则包括：\n\n- 当`调试模式开启`时，显示\n- 当处于`开发者工具环境`时，显示\n- 当处于`预览版`时，显示\n- 当处于`体验版`时，显示\n- 当处于`正式版`时，**不显示**\n\n### 3.2 在需要的地方引用`组件`：\n\n- `微信小程序`引用方式：\n\n```javascript\n// NPM方式引用\n\"usingComponents\": {\n \"weconsole\": \"weconsole/subpackage/components/main/index\"\n}\n\n// 普通方式引用\n\"usingComponents\": {\n \"weconsole\": \"{复制后的【dist/full】的路径}/subpackage/components/main/index\"\n}\n```\n\n- `支付宝小程序`引用方式：\n\n```javascript\n// NPM方式引用\n\"usingComponents\": {\n \"weconsole\": \"weconsole/dist/alipay/npm/subpackage/components/main/index\"\n}\n\n// 普通方式引用\n\"usingComponents\": {\n \"weconsole\": \"{复制后的【dist/alipay/full】的路径}/subpackage/components/main/index\"\n}\n```\n\n- `小红书小程序`引用方式：\n\n```javascript\n// NPM方式引用\n\"usingComponents\": {\n \"weconsole\": \"weconsole/dist/xhs/npm/subpackage/components/main/index\"\n}\n\n// 普通方式引用\n\"usingComponents\": {\n \"weconsole\": \"{复制后的【dist/xhs/full】的路径}/subpackage/components/main/index\"\n}\n```\n\n- `百度小程序`引用方式：\n\n```javascript\n// NPM方式引用\n\"usingComponents\": {\n \"weconsole\": \"weconsole/dist/swan/npm/subpackage/components/main/index\"\n}\n\n// 普通方式引用\n\"usingComponents\": {\n \"weconsole\": \"{复制后的【dist/swan/full】的路径}/subpackage/components/main/index\"\n}\n```\n\n然后在小程序视图层的`xml`文件中使用``标签进行初始化：\n\n> 可以使用 weconsole 提供的命令行工具一键批量插入标签，参考 **【5、一键注入】**\n\n```xml\n\n\n```\n\n``标签支持传入以下属性：\n\n```javascript\nproperties: {\n // 组件全屏化后，距离窗口顶部距离\n fullTop: String,\n // 刘海屏机型（如iphone12等）下组件全屏化后，距离窗口顶部距离\n adapFullTop: String,\n // v1.1.0 支持，代表weconsole组件的z-index值\n zIndex: Number,\n // v1.1.0 支持，自定义weconsole图标，传递图片URL\n icon: String,\n // v1.1.0 支持，支持自定义图标样式，传true时同时设置slot=\"hand\"的插槽内容，可定制\n customHand: Boolean\n}\n```\n\n## 4、建议\n\n如果不想将 weconsole 放置在主包中，建议将组件放在分包内使用，利用小程序的 [分包异步化](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html) 的特性，减少主包大小；\n\n- 微信小程序：\n - 主包文件：`dist/{full|npm}/main/*`\n - 分包文件：`dist/{full|npm}/subpackage/*`\n- 支付宝小程序：\n - 主包文件：`dist/alipay/{full|npm}/main/*`\n - 分包文件：`dist/alipay/{full|npm}/subpackage/*`\n- 小红书小程序：\n - 主包文件：`dist/xhs/{full|npm}/main/*`\n - 分包文件：`dist/xhs/{full|npm}/subpackage/*`\n- 百度小程序：\n - 主包文件：`dist/swan/{full|npm}/main/*`\n - 分包文件：`dist/swan/{full|npm}/subpackage/*`\n\n## 5、一键注入\n\n如果你不想一个个页面的插入``标签，或者就想小程序中的所有页面全部插入，那你可以使用 weconsole 提供的命令行工具来完成：\n\n```bash\n# 安装weconsole后，可使用`weconsole inject`命令进行一键注入\n\nnpx weconsole inject ./my-mp-xxx copy replace\n```\n\n`weconsole`命令可接受的参数及可选值含义如下：\n\n```ts\ninterface InjectConfig {\n /** 要注入的小程序项目目录 */\n projectDir: string;\n /** 如果项目已经被注入过了，是否本次注入要进行替换？ */\n replace?: boolean;\n /** 本次注入强行显示weconsole入口图标 */\n forceShow?: boolean;\n /** 注入方式：\n * npm: 以引用npm包的方式注入，但注入后需要开发者工具主动编译才可使用，好处是如果有重复的依赖可以减少代码体积；\n * full: 以全依赖引用的方式注入，无需开发者工具主动编译就可使用，缺点是可能存在依赖包被重复打包代码的问题；\n */\n mode?: 'npm' | 'full';\n /** 注入的小程序项目属于哪个平台？不传时，自动根据目录中的文件特征判断 */\n platform?: 'wx' | 'alipay' | 'xhs' | 'swan';\n /** 注入weconsole标签时传入的fullTop属性值 */\n fullTop?: string;\n /** 注入weconsole标签时传入的adapFullTop属性值 */\n adapFullTop?: string;\n /** 注入weconsole标签时传入的zIndex属性值 */\n zIndex?: number;\n /** 是否在注入时将weconsole的所有JS及组件文件复制到项目根目录？ */\n copy?: boolean;\n}\n```\n\n \n\n# 三、功能\n\n\nWeConsole 主要包括以下功能：
\n\n## 1、Console\n\n- 界面如图 1\n- 实时显示`console.log/info/warn/error`记录；\n- `Filter`框输入关键字已进行记录筛选；\n- 使用分类标签`All, Mark, Log, Errors, Warnings...`等进行记录分类显示，分类列表中`All, Mark, Log, Errors, Warnings`为固定项，其他可由配置项`consoleCategoryGetter`产生\n- 点击`🚫`按钮清空记录（不会清除`留存`的记录）\n- `长按`记录可弹出操作项（如图 2）：\n - `复制`：将记录数据执行复制操作，具体形式可使用配置项`copyPolicy`指定，未指定时，将使用`JSON.stringify`序列化数据，将其复制到剪切板\n - `取消置顶/置顶显示`：将记录取消置顶/置顶显示，最多可置顶三条（置顶无非是想快速找到重要的数据，当重要的数据过多时，就不宜用置顶了，可以使用`标记`功能，然后在使用筛选栏中的`Mark`分类进行筛选显示）\n - `取消留存/留存`：留存是指将记录保留下来，使其不受清除，即点击`🚫`按钮不被清除\n - `取消全部留存`：取消所有留存的记录\n - `取消标记/标记`：标记就是将数据添加一个`Mark`的分类，可以通过筛选栏快速分类显示\n - `取消全部标记`：取消所有标记的记录\n\n\n\n
\n\n图 1\n\n\n\n
\n\n图 2\n\n## 2、Api\n\n- 界面如图 3\n- 实时显示`wx`对象下的相关 api 执行记录\n- `Filter`框输入关键字已进行记录筛选\n- 使用分类标签`All, Mark, Cloud, xhr...`等进行记录分类显示，分类列表由配置项`apiCategoryList`与`apiCategoryGetter`产生\n- 点击`🚫`按钮清空记录（不会清除`留存`的记录）\n- `长按`记录可弹出操作项（如图 4）：\n - `复制`：将记录数据执行复制操作，具体形式可使用配置项`copyPolicy`置顶，未指定时，将使用系统默认方式序列化数据（具体看实际效果），将其复制到剪切板\n - 其他操作项含义与`Console`功能类似\n- 点击条目可展示详情，如图 5\n\n\n\n
\n\n图 3\n\n\n\n
\n\n图 4\n\n\n\n
\n\n图 5\n\n## 3、Component\n\n- 界面如图 6\n- 树结构显示组件实例列表\n - 根是`App`\n - 二级固定为`getCurrentPages`返回的页面实例\n - 三级及更深通过`this.selectOwnerComponent()`进行父实例定位，进而确定层级\n- 点击节点名称（带有下划虚线），可显示组件实例详情，以 JSON 树的方式查看组件的所有数据，如图 7\n\n\n\n
\n\n图 6\n\n\n\n
\n\n图 7\n\n## 4、Storage\n\n- 界面如图 8\n- 显示 Storage 记录\n- `Filter`框输入关键字已进行记录筛选\n- 点击`🚫`按钮清空记录（不会清除`留存`的记录）\n- `长按`操作项含义与`Console`功能类似\n- 点击条目后，再点击`❌`按钮可将其删除\n- 点击`Filter`框左侧的`刷新`按钮可刷新全部数据\n- 点击条目显示详情，如图 9\n\n\n\n
\n\n图 8\n\n\n\n
\n\n图 9\n\n## 5、其他\n\n- 界面如图 10\n- 默认显示 系统信息\n- 可通过`customActions`配置项进行界面功能快速定制，也可通过`addCustomAction/removeCustomAction`添加/删除定制项目\n- 几个简单的定制案例如下，效果如图 11：\n\n```javascript\nimport { setUIRunConfig } from 'xxx/weconsole/main/index.js';\n\nsetUIRunConfig({\n customActions: [\n {\n id: 'test1',\n title: '显示文本',\n autoCase: 'show',\n cases: [\n {\n id: 'show',\n button: '查看',\n showMode: WcCustomActionShowMode.text,\n handler(): string {\n return '测试文本';\n }\n },\n {\n id: 'show2',\n button: '查看2',\n showMode: WcCustomActionShowMode.text,\n handler(): string {\n return '测试文本2';\n }\n }\n ]\n },\n {\n id: 'test2',\n title: '显示JSON',\n autoCase: 'show',\n cases: [\n {\n id: 'show',\n button: '查看',\n showMode: WcCustomActionShowMode.json,\n handler() {\n return wx;\n }\n }\n ]\n },\n {\n id: 'test3',\n title: '显示表格',\n autoCase: 'show',\n cases: [\n {\n id: 'show',\n button: '查看',\n showMode: WcCustomActionShowMode.grid,\n handler(): WcCustomActionGrid {\n return {\n cols: [\n {\n title: 'Id',\n field: 'id',\n width: 30\n },\n {\n title: 'Name',\n field: 'name',\n width: 70\n }\n ],\n data: [\n {\n id: 1,\n name: 'Tom'\n },\n {\n id: 2,\n name: 'Alice'\n }\n ]\n };\n }\n }\n ]\n }\n ]\n});\n```\n\n\n\n
\n\n图 10\n\n\n\n
\n\n图 10\n\n \n\n# 四、API\n\n\n主要暴露以下API：
\n\n## 通过以下方式使用 API\n\n```javascript\nimport { showWeConsole, ... } from 'weconsole';\nshowWeConsole();\n```\n\n## replace(scope:'App'|'Page'|'Component'|'Api'|'Console')\n\n替换系统变量或函数以达到监控，底层控制全局仅替换一次\n\n## restore(scope:'App'|'Page'|'Component'|'Api'|'Console')\n\n还原被替换的系统变量或函数，还原后界面将不在显示相关数据\n\n## showWeConsole()\n\n显示`WeConsole`入口图标\n\n## hideWeConsole()\n\n隐藏`WeConsole`入口图标\n\n## setUIConfig(config: Partial<MpUIConfig>)\n\n设置`WeConsole`组件内的相关配置，可接受的配置项及含义如下：\n\n```typescript\ninterface MpUIConfig {\n /** 监控小程序API数据后，使用该选项进行该数据的分类值计算，计算后的结果显示在界面上 */\n apiCategoryGetter?: MpProductCategoryMap | MpProductCategoryGetter;\n /** 监控Console数据后，使用该选项进行该数据的分类值计算，计算后的结果显示在界面上 */\n consoleCategoryGetter?: MpProductCategoryMap | MpProductCategoryGetter;\n /** Other内置信息中获取当前页面实例时执行的方法 */\n currentPageGetter?: () => MpView;\n /** API选项卡下显示的数据分类列表，all、mark、other 分类固定存在 */\n apiCategoryList?: Array>;\n /** 复制策略，传入复制数据，可通过数据的type字段判断数据哪种类型，比如api/console */\n copyPolicy?: MpProductCopyPolicy;\n /** 定制化列表 */\n customActions?: WcCustomAction[];\n /** 默认的api分类值 */\n apiDefaultCategoryValue?: string;\n /** 默认的console分类值 */\n consoleDefaultCategoryValue?: string;\n /** 不监控这些API，也就是说这些API调用后不会在【API】选项卡中显示 */\n ignoreHookApiNames?: string[];\n /** 只监控这些API，也就是除了这些API以外的其他调用都不会在【API】选项卡中显示 */\n onlyHookApiNames?: string[];\n /** 全局对象，如果你的小程序存在沙盒环境，请务必传递一个可供全局存储数据的单例对象 */\n globalObject?: any;\n}\n\n// 配置项的详细types请参考源码目录：src/types\n```\n\n## addCustomAction(action: WcCustomAction)\n\n添加一个定制化项目；当你添加的项目中需要显示你自己的组件时：\n\n- 请将 case 的`showMode`值设置为`component`\n- 在`app.json`中注册名称为`weconsole-customer`的组件\n- 定制化项目的 case 被执行时，会将执行结果传递给`weconsole-customer`的`data`属性\n- 开发者根据`data`属性中的数据自行判断内部显示逻辑\n\n## removeCustomAction(actionId: string)\n\n根据 ID 删除一个定制化项目\n\n## getWcControlMpViewInstances():any[]\n\n获取小程序内 weconsole 已经监控到的所有的 App/Page/Component 实例\n\n## log(type = \"log\", ...args)\n\n因为 console 被重写，当你想使用最原始的 console 方法时，可以通过该方式，type 就是 console 的方法名\n\n## on/once/off/emit\n\n提供一个事件总线功能，全局事件及相关函数定义如下：\n\n```typescript\nconst enum WeConsoleEvents {\n /**UIConfig对象发生变化时 */\n WcUIConfigChange = 'WcUIConfigChange',\n /**入口图标显示性发生变化时 */\n WcVisableChange = 'WcVisableChange',\n /**CanvasContext准备好时，CanvasContext用于JSON树组件的界面文字宽度计算 */\n WcCanvasContextReady = 'WcCanvasContextReady',\n /**CanvasContext销毁时 */\n WcCanvasContextDestory = 'WcCanvasContextDestory',\n /**主组件的宽高发生变化时 */\n WcMainComponentSizeChange = 'WcMainComponentSizeChange'\n}\n\ninterface IEventEmitter {\n on(type: string, handler: EventHandler);\n once(type: string, handler: EventHandler);\n off(type: string, handler?: EventHandler);\n emit(type: string, data?: T);\n}\n```\n\n \n\n# 五、后续规划\n\n- ✅ 优化包大小\n- ✅ 体验优化\n- ✅ 定制化升级\n- ✅ 支持其他小程序平台（支付宝/百度/字节跳动）\n- 🚫 单元测试\n- 🚫 基于网络通信的界面化 weconsole\n- 🚫 标准化\n- 🚫 支持 H5\n\n# 六、贡献流程\n\n请阅读 [贡献流程](./CONTRIBUTING.md) 文档来参与项目的迭代与开发，我们将会非常感谢您的付出。\n\n# 七、License\n\nWeConsole 使用 [MIT](./LICENSE) 协议.\n\n# 八、声明\n\n生产环境请谨慎使用。\n\n# 九、更新记录\n\n\n更新记录：
\n\n- v1.6.0\n\n - 功能升级\n - 支持`百度`小程序\n - 优化`Component`面板\n - 组件树不在使用 group 方式进行分组显示\n - 点击样式优化\n - 整体组件数子节点查询优化\n - 一键注入\n - 支持注入`百度`小程序\n - 修复 BUG\n\n - 修复支付宝组件注册时没写 created 等生命周期函数时，在组件树中看不到的问题\n - 修复支付宝组件树子节点判断问题\n - 修复 wcconsole_xy storage 拿到空值时 icon 看不到的问题\n - 修复 createSelectorQuery 调用导致 Api 面板虚拟列表方法调用死循环的问题\n\n - 其他\n - 添加`百度`小程序示例代码\n\n- v1.5.0\n\n - 功能升级\n - 支持`小红书`小程序\n - 优化`Console`面板\n - 函数类型数据样式优化\n - 非 object 类型数据直接展示，不使用`json-viewer`组件\n - 一键注入\n - 支持注入`小红书`小程序\n - 其他\n - 添加`小红书`小程序示例代码\n\n- v1.4.1\n\n - 功能升级\n - 支持跨平台：目前已支持`微信`、`支付宝`，后续还将支持百度、小红书、QQ 等小程序平台\n - 优化虚拟列表\n - 优化`Console`面板\n - 优化样式\n - 优化`Api`面板\n - 切换分类时重置详细页\n - 优化样式\n - 优化`Component`面板\n - 显示``环境版本和版本号\n - 调整字号\n - 提供`cli`工具方便向小程序项目一键注入 weconsole 代码\n - 支持注入`微信`小程序\n - 支持注入`支付宝`小程序\n - 修复 BUG\n - 修复`Api`面板切换详情时 json 数据未变的问题\n - 修复`Console`面板复制对象存在循环引用情况下无法复制并报错的问题\n - 重构代码\n - 自定义`CustomAction`组件对接`table`组件\n - 抽象跨平台代码到独立 npm 包\n - 其他\n - 添加`支付宝`小程序示例代码\n\n- v1.3.0\n\n - 功能升级\n - 更换虚拟列表底层实现\n - 优化部分`api`列表项标题文案\n - 优化自定义`action`展示\n - 修复 BUG\n - 修复虚拟列表滚动白屏问题\n - 修复`storage`复制失败问题\n - 修复复制`console`等数据存在循环引用时报错的问题\n - 重构代码\n - 删除`data-grid`组件改用底层使用虚拟列表的`table`组件\n - 删除无用 mixin\n - 编译优化\n - 优化主包分包代码分块\n - 其他\n - 添加小程序示例代码，目录：`examples`\n\n- v1.2.0\n\n - 重构代码\n - 使用`class`方式定义组件\n - 编译优化\n - 初步划分主包和分包目录\n - JS 产物文件合并\n\n- v1.1.3\n - 升级依赖包\n - 优化性能\n - 组件/页面实例销毁后也从 weconsole 缓存中删除\n - 点击`console/api`的清除按钮后，也将缓存中的数据删除\n - 优化数据存储方式\n - 组件`setData`使用延迟更新方式\n - 修复 BUG\n - `data-grid`组件列宽度计算错误问题\n - `自定义action`不显示按钮文案的问题\n - 添加功能\n - `自定义 data-grid action`支持长按复制单元格内容\n - `data-grid`组件支持多行文本\n\n \n","readmeFilename":"README.md","_rev":"1-adb23b67bfeaf3c106fca263cee21ac7"}