WeConsole

https://github.com/weimob-tech/weconsole
Admin
WeConsole is a comprehensive, customizable cross-platform mini-program development debugging panel...
Tokens:11,253
Snippets:91
Trust Score:7.7
License:MIT
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install WeConsole via NPM

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

Use the standard npm command to add the package to your project.

```bash
npm i weconsole -S
```

--------------------------------

### Initialize WeConsole Core in app.js

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

Import the core module in your app.js file to enable global monitoring. Choose between NPM or local file paths based on your installation method.

```javascript
// NPM方式引用
import 'weconsole/main/init';

// 普通方式引用
import '{复制后的【dist/full】的路径}/main/init';
```

```javascript
// NPM方式引用
import 'weconsole/dist/alipay/npm/main/init';

// 普通方式引用
import '{复制后的【dist/alipay/full】的路径}/main/init';
```

```javascript
// NPM方式引用
import 'weconsole/dist/xhs/npm/main/init';

// 普通方式引用
import '{复制后的【dist/xhs/full】的路径}/main/init';
```

```javascript
// NPM方式引用
import 'weconsole/dist/swan/npm/main/init';

// 普通方式引用
import '{复制后的【dist/swan/full】的路径}/main/init';
```

--------------------------------

### getUIConfig - Get Configuration

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Retrieves the current UI configuration object.

```APIDOC
## getUIConfig()

### Description
Returns the current configuration object used by WeConsole.
```

--------------------------------

### Get Monitored Instance List

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Retrieves a list of all monitored App, Page, and Component instances within the mini-program for advanced debugging. It's useful for inspecting the state of different parts of your application.

```javascript
import { getWcControlMpViewInstances } from 'weconsole';

// 获取所有被监控的实例
const instances = getWcControlMpViewInstances();

console.log('监控的实例总数:', instances.length);

// 遍历实例
instances.forEach((instance, index) => {
    if (instance.$wcViewType === 'App') {
        console.log('App 实例:', instance);
    } else if (instance.$wcViewType === 'Page') {
        console.log(`Page [${instance.route}]:`, instance.data);
    } else if (instance.$wcViewType === 'Component') {
        console.log('Component 实例:', instance.is);
    }
});

// 查找特定页面实例
const homePage = instances.find(
    inst => inst.$wcViewType === 'Page' && inst.route === 'pages/index/index'
);
if (homePage) {
    console.log('首页数据:', homePage.data);
}
```

--------------------------------

### Control WeConsole Icon Visibility Based on User Permissions

Source: https://context7.com/weimob-tech/weconsole/llms.txt

An example demonstrating how to control the WeConsole entry icon's visibility based on whether a user is a debug user. The icon is shown for debug users and hidden otherwise.

```javascript
App({
    onLaunch() {
        if (this.isDebugUser()) {
            showWeConsole();
        } else {
            hideWeConsole();
        }
    },
    isDebugUser() {
        // 判断是否为调试用户
        return true;
    }
});
```

--------------------------------

### Get Current WeConsole UI Configuration

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Retrieve the current UI configuration object for WeConsole. This object contains all active configuration settings.

```javascript
import { getUIConfig } from 'weconsole';

const config = getUIConfig();
console.log('当前忽略的 API:', config.ignoreHookApiNames);
console.log('当前 API 分类列表:', config.apiCategoryList);
console.log('自定义 Action 数量:', config.customActions?.length || 0);
```

--------------------------------

### Restore Specific System Variables

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Restore specific system variables or functions to stop monitoring for that scope. For example, `restore('Console')` stops console monitoring.

```javascript
// 按需还原单个 scope
restore('Console');  // 停止监控 console
restore('Api');      // 停止监控 API 调用
restore('Page');     // 停止监控 Page 实例
```

--------------------------------

### Remove Custom Action

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Use removeCustomAction to dynamically remove a previously added custom action by its ID. This example demonstrates removing an action after a delay.

```javascript
import { removeCustomAction, addCustomAction } from 'weconsole';

// 先添加一个自定义 action
addCustomAction({
    id: 'tempDebug',
    title: '临时调试',
    autoCase: 'show',
    cases: [{
        id: 'show',
        button: '查看',
        showMode: 'text',
        handler() {
            return '临时调试信息';
        }
    }]
});

// 稍后移除
setTimeout(() => {
    removeCustomAction('tempDebug');
    console.log('临时调试面板已移除');
}, 60000);

```

--------------------------------

### WeConsole Initialization and Core APIs

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

Demonstrates how to initialize WeConsole and use its fundamental API methods.

```APIDOC
## Initialize WeConsole

### Description
Shows the WeConsole entry icon.

### Method
```javascript
showWeConsole()
```

### Endpoint
N/A (Client-side function)

## Hide WeConsole

### Description
Hides the WeConsole entry icon.

### Method
```javascript
hideWeConsole()
```

### Endpoint
N/A (Client-side function)

## Replace System Variables/Functions

### Description
Replaces system variables or functions for monitoring and global control. This replacement occurs only once globally.

### Method
```javascript
replace(scope: 'App' | 'Page' | 'Component' | 'Api' | 'Console')
```

### Endpoint
N/A (Client-side function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

## Restore System Variables/Functions

### Description
Restores replaced system variables or functions. After restoration, the interface will no longer display related data.

### Method
```javascript
restore(scope: 'App' | 'Page' | 'Component' | 'Api' | 'Console')
```

### Endpoint
N/A (Client-side function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None
```

--------------------------------

### Initialize and Show WeConsole

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

Import and call `showWeConsole` to display the WeConsole entry icon. Ensure necessary imports are included.

```javascript
import { showWeConsole, ... } from 'weconsole';
showWeConsole();
```

--------------------------------

### Initialize WeConsole with Full Replacement

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Use this to replace all system variables and enable full monitoring. Recommended for one-time, full replacement.

```javascript
import { replace } from 'weconsole';

// 替换所有系统变量，开启全量监控
replace();
```

--------------------------------

### WeConsole Initialization and Customization

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Initialize WeConsole in your mini-program's app.js file using `replace()` and `showWeConsole()`. Customize UI configurations and add custom debugging actions with specific handlers.

```javascript
import { replace, showWeConsole, setUIConfig, addCustomAction } from 'weconsole';

// 在 app.js 中初始化
replace();
showWeConsole();

// 配置 UI
setUIConfig({
    ignoreHookApiNames: ['nextTick', 'createSelectorQuery'],
    apiCategoryList: ['xhr', 'storage', 'other']
});

// 添加业务相关的调试面板
addCustomAction({
    id: 'businessDebug',
    title: '业务调试',
    autoCase: 'state',
    cases: [
        {
            id: 'state',
            button: '应用状态',
            showMode: 'json',
            handler() {
                return getApp().globalData;
            }
        }
    ]
});

Page({
    data: {
        message: 'Hello WeConsole'
    },
    onLoad() {
        // 触发各种监控
        console.log('页面加载', this.data);
        wx.getStorageSync('test');
        wx.request({
            url: 'https://api.example.com/data',
            success: (res) => console.log('请求成功', res)
        });
    }
});
```

--------------------------------

### getWcControlMpViewInstances

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Retrieves all monitored App, Page, and Component instances within the小程序 for advanced debugging.

```APIDOC
## getWcControlMpViewInstances

### Description
Retrieves all App, Page, and Component instances currently monitored by WeConsole.

### Method
Function Call

### Response
- **instances** (Array) - A list of monitored instances, each containing a `$wcViewType` property (App, Page, or Component).
```

--------------------------------

### Instance Retrieval and Logging

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

APIs for retrieving WeConsole monitored instances and for logging using the original console methods.

```APIDOC
## Get WeConsole Monitored Instances

### Description
Retrieves all App/Page/Component instances that WeConsole has monitored within the mini-program.

### Method
```javascript
getWcControlMpViewInstances(): any[]
```

### Endpoint
N/A (Client-side function)

### Parameters
None

### Response
#### Success Response (200)
- **Array** (any[]) - A list of monitored mini-program view instances.

#### Response Example
```json
[
  { ... App Instance ... },
  { ... Page Instance ... },
  { ... Component Instance ... }
]
```

## Log with Original Console Methods

### Description
Provides access to the original console methods, as the console has been overridden by WeConsole. The `type` parameter corresponds to the console method name (e.g., 'log', 'warn', 'error').

### Method
```javascript
log(type = "log", ...args: any[])
```

### Endpoint
N/A (Client-side function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **type** (string) - Optional - The name of the original console method to use (defaults to 'log').
- **args** (any[]) - Required - The arguments to pass to the original console method.

### Request Example
```javascript
log('warn', 'This is a warning message');
log('error', { error: 'Something went wrong' });
```
```

--------------------------------

### Inject WeConsole via CLI

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

Use the npx command to automatically inject the WeConsole component into all pages of a mini-program project.

```bash
npx weconsole inject ./my-mp-xxx copy replace
```

--------------------------------

### Restore All System Variables

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Use this to restore all system variables and functions that were replaced by `replace()`. Monitoring will cease, and related data will no longer appear.

```javascript
import { restore } from 'weconsole';

// 还原所有被替换的系统变量
restore();
```

--------------------------------

### Force Show WeConsole Entry Icon

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Use `showWeConsole()` to force the display of the WeConsole entry icon. This is useful for scenarios where you need to ensure the icon is visible.

```javascript
import { showWeConsole, hideWeConsole } from 'weconsole';

// 强制显示入口图标
showWeConsole();
```

--------------------------------

### Event Bus: Listen and Emit Events

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Utilize the WeConsole event bus for internal event monitoring and custom event communication. Use 'on' to subscribe, 'once' for a single subscription, 'off' to unsubscribe, and 'emit' to trigger events.

```javascript
import { on, once, off, emit } from 'weconsole';

// 监听 UI 配置变化
const configHandler = (type, config) => {
    console.log('UI 配置已更新:', config);
};
on('WcUIConfigChange', configHandler);

// 监听入口图标显示状态变化
on('WcVisibleChange', (type, visible) => {
    console.log('入口图标显示状态:', visible ? '显示' : '隐藏');
});

// 监听主组件尺寸变化
on('WcMainComponentSizeChange', () => {
    console.log('调试面板尺寸已变化');
});

// 一次性监听（触发后自动移除）
once('WcCanvasContextReady', (type, ctx) => {
    console.log('Canvas 上下文已就绪');
});

// 移除指定事件监听
off('WcUIConfigChange', configHandler);

// 移除某类型的所有监听
off('WcUIConfigChange');

// 触发自定义事件
emit('myCustomEvent', { data: 'test' });

```

--------------------------------

### Initialize WeConsole with Specific Scope Replacement

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Replace specific system variables or functions to enable targeted monitoring. Scope options include 'App', 'Page', 'Component', 'Api', 'Console'.

```javascript
// 按需替换单个 scope
// scope 可选值：'App' | 'Page' | 'Component' | 'Api' | 'Console'
replace('Console');  // 仅监控 console.log/info/warn/error
replace('Api');      // 仅监控 wx/my/swan 对象下的 API 调用
replace('App');      // 仅监控 App 实例
replace('Page');     // 仅监控 Page 实例
replace('Component'); // 仅监控 Component 实例
```

--------------------------------

### weconsole inject CLI

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Command line tool to automatically inject WeConsole code and tags into an小程序 project.

```APIDOC
## weconsole inject

### Description
Batch injects WeConsole code and tags into the specified project directory.

### Usage
`npx weconsole inject [projectDir] [options]`

### Parameters
- **projectDir** (string) - Required - The path to the小程序 project directory.
- **copy** (flag) - Optional - Copies files to the project.
- **replace** (flag) - Optional - Replaces existing injection.
```

--------------------------------

### WeConsole CLI Inject Command

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Use the `weconsole inject` command to automatically inject WeConsole code and tags into your mini-program project. Supports basic usage and configuration via a `weconsole.config.js` file.

```bash
# 基础用法：注入到指定目录
npx weconsole inject ./my-miniprogram-project copy replace

# 参数说明
# ./my-miniprogram-project - 要注入的小程序项目目录
# copy - 将 weconsole 文件复制到项目目录
# replace - 如果已注入过，进行替换

# 完整参数配置示例（通过配置文件）
# 在项目根目录创建 weconsole.config.js
module.exports = {
    projectDir: './src',
    replace: true,
    forceShow: true,
    mode: 'full',  // 'npm' | 'full'
    platform: 'wx',  // 'wx' | 'alipay' | 'xhs' | 'swan'
    fullTop: '44px',
    adapFullTop: '88px',
    zIndex: 999,
    copy: true
};
```

--------------------------------

### Configure Custom UI Actions for WeConsole

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

Use `setUIRunConfig` to define custom actions that appear in the WeConsole interface. This allows for quick customization of UI features, such as displaying text, JSON, or grid data.

```javascript
import { setUIRunConfig } from 'xxx/weconsole/main/index.js';

setUIRunConfig({
    customActions: [
        {
            id: 'test1',
            title: '显示文本',
            autoCase: 'show',
            cases: [
                {
                    id: 'show',
                    button: '查看',
                    showMode: WcCustomActionShowMode.text,
                    handler(): string {
                        return '测试文本';
                    }
                },
                {
                    id: 'show2',
                    button: '查看2',
                    showMode: WcCustomActionShowMode.text,
                    handler(): string {
                        return '测试文本2';
                    }
                }
            ]
        },
        {
            id: 'test2',
            title: '显示JSON',
            autoCase: 'show',
            cases: [
                {
                    id: 'show',
                    button: '查看',
                    showMode: WcCustomActionShowMode.json,
                    handler() {
                        return wx;
                    }
                }
            ]
        },
        {
            id: 'test3',
            title: '显示表格',
            autoCase: 'show',
            cases: [
                {
                    id: 'show',
                    button: '查看',
                    showMode: WcCustomActionShowMode.grid,
                    handler(): WcCustomActionGrid {
                        return {
                            cols: [
                                {
                                    title: 'Id',
                                    field: 'id',
                                    width: 30
                                },
                                {
                                    title: 'Name',
                                    field: 'name',
                                    width: 70
                                }
                            ],
                            data: [
                                {
                                    id: 1,
                                    name: 'Tom'
                                },
                                {
                                    id: 2,
                                    name: 'Alice'
                                }
                            ]
                        };
                    }
                }
            ]
        }
    ]
});
```

--------------------------------

### UI Configuration API

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

APIs for setting and managing the user interface configuration of WeConsole.

```APIDOC
## Set UI Configuration

### Description
Sets related configurations within the WeConsole component. Accepts configuration items and their meanings.

### Method
```javascript
setUIConfig(config: Partial<MpUIConfig>)
```

### Endpoint
N/A (Client-side function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **config** (object) - Required - An object containing partial `MpUIConfig` properties to update.

### Request Example
```json
{
  "apiCategoryGetter": { ... },
  "consoleCategoryGetter": { ... },
  "currentPageGetter": () => { ... },
  "apiCategoryList": ["all", "mark", "other"],
  "copyPolicy": { ... },
  "customActions": [ ... ],
  "apiDefaultCategoryValue": "default",
  "consoleDefaultCategoryValue": "default",
  "ignoreHookApiNames": ["wx.request"],
  "onlyHookApiNames": ["wx.login"],
  "globalObject": window
}
```

### Response
#### Success Response (200)
N/A (This is a configuration function, typically no direct response)

#### Response Example
N/A
```

--------------------------------

### CLI Injection Command

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

The command-line interface allows for automated injection of the WeConsole component into existing mini-program projects.

```APIDOC
## CLI Command: npx weconsole inject

### Description
Injects the WeConsole component into all pages of a specified mini-program project directory.

### Parameters
- **projectDir** (string) - Required - The path to the mini-program project directory.
- **replace** (boolean) - Optional - Whether to replace existing injection if the project was already injected.
- **forceShow** (boolean) - Optional - Force the display of the WeConsole entry icon.
- **mode** (string) - Optional - Injection mode: 'npm' (requires compilation) or 'full' (direct injection).
- **platform** (string) - Optional - Target platform: 'wx', 'alipay', 'xhs', or 'swan'.
- **fullTop** (string) - Optional - Value for the fullTop attribute.
- **adapFullTop** (string) - Optional - Value for the adapFullTop attribute.
- **zIndex** (number) - Optional - Value for the zIndex attribute.
- **copy** (boolean) - Optional - Whether to copy JS and component files to the project root directory.

### Request Example
```bash
npx weconsole inject ./my-mp-xxx copy replace
```
```

--------------------------------

### replace - Enable Monitoring

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Replaces system variables or functions (App, Page, Component, Api, Console) to enable global monitoring. Supports selective or full replacement.

```APIDOC
## replace(scope)

### Description
Replaces system variables or functions to enable global monitoring.底层控制全局仅替换一次，避免重复监控。

### Parameters
#### Parameters
- **scope** (string) - Optional - The specific scope to replace: 'App', 'Page', 'Component', 'Api', or 'Console'. If omitted, performs full replacement.
```

--------------------------------

### Event Bus API (on/once/off/emit)

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Provides event bus functionality to listen for internal WeConsole events or communicate via custom events.

```APIDOC
## Event Bus API

### Description
Methods for managing event subscriptions and triggering custom events.

### Methods
- **on(event, handler)**: Register a persistent listener.
- **once(event, handler)**: Register a one-time listener.
- **off(event, [handler])**: Remove a specific listener or all listeners for an event.
- **emit(event, data)**: Trigger a custom event.
```

--------------------------------

### Configure Selective Monitoring

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

Use the replace and restore methods to manually control which system variables or functions are monitored.

```javascript
import { replace, restore, showWeConsole, hideWeConsole } from '{NPM或复制后的【dist/full】的路径}/main/index';

// scope可选值：App/Page/Component/Console/Api
// 按需替换系统变量或函数以达到监控
replace(scope);

// 可还原
restore(scope);

// 通过show/hide方法控制显示入口图标
showWeConsole();
```

--------------------------------

### Configure WeConsole UI Settings

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Set various UI configurations for WeConsole, including API categorization rules, copy policies, and custom panels. Changes trigger the WcUIConfigChange event.

```javascript
import { setUIConfig } from 'weconsole';

setUIConfig({
    // 自定义 API 分类规则
    apiCategoryGetter(product) {
        if (product.category?.startsWith('cloud')) {
            return 'cloud';
        }
        if (product.name?.includes('request')) {
            return 'xhr';
        }
        return 'other';
    },

    // API 选项卡下显示的分类列表
    apiCategoryList: [
        { name: '网络请求', value: 'xhr' },
        { name: '云函数', value: 'cloud' },
        { name: '存储', value: 'storage' },
        'other'
    ],

    // 不监控这些 API（不会在 API 选项卡中显示）
    ignoreHookApiNames: ['nextTick', 'canIUse', 'getSystemInfoSync'],

    // 只监控这些 API（其他 API 调用都不会显示）
    // onlyHookApiNames: ['request', 'uploadFile', 'downloadFile'],

    // 自定义复制策略
    copyPolicy(product) {
        if (product.type === 'api' && product.request) {
            return JSON.stringify({
                url: product.request.url,
                method: product.request.method,
                data: product.request.data
            }, null, 2);
        }
        return JSON.stringify(product, null, 2);
    },

    // 沙盒环境下传递全局对象
    // globalObject: myGlobalObject
});
```

--------------------------------

### addCustomAction

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Adds a custom project to the Other tab in WeConsole, supporting various display modes like JSON trees, data grids, and text.

```APIDOC
## addCustomAction

### Description
Adds a custom project to the Other tab in WeConsole. Supports display modes: json, text, and grid.

### Parameters
- **options** (object) - Required - Configuration object containing id, title, autoCase, and cases array.

### Request Example
{
  "id": "userInfo",
  "title": "用户信息",
  "autoCase": "show",
  "cases": [
    {
      "id": "show",
      "button": "查看",
      "showMode": "json",
      "handler": "function() { return { userId: '123' }; }"
    }
  ]
}
```

--------------------------------

### setUIConfig - Configure UI

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Sets the configuration for the WeConsole component, including API categorization, copy policies, and custom panel settings.

```APIDOC
## setUIConfig(config)

### Description
Updates the UI configuration. Changes trigger a WcUIConfigChange event.

### Parameters
#### Request Body
- **apiCategoryGetter** (function) - Optional - Custom logic to categorize API calls.
- **apiCategoryList** (array) - Optional - List of categories to display in the API tab.
- **ignoreHookApiNames** (array) - Optional - List of API names to exclude from monitoring.
- **onlyHookApiNames** (array) - Optional - List of API names to exclusively monitor.
- **copyPolicy** (function) - Optional - Custom logic for copying data from the panel.
```

--------------------------------

### Add Custom Action with Text Display

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Add a custom action to display plain text information. The handler function should return a string, potentially using template literals for dynamic content.

```javascript
import { addCustomAction } from 'weconsole';

// 示例2：显示文本信息
addCustomAction({
    id: 'envInfo',
    title: '环境信息',
    autoCase: 'show',
    cases: [
        {
            id: 'show',
            button: '查看环境',
            showMode: 'text',  // 以纯文本方式显示
            handler() {
                return `当前环境: ${__wxConfig.envVersion}\n版本号: 1.0.0\n构建时间: 2024-01-01`;
            }
        }
    ]
});

```

--------------------------------

### Log using Original Console Methods

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Bypass WeConsole's monitoring for logs by using the 'log' utility function, which calls the original console methods. This is useful for outputting logs that should not be tracked by WeConsole.

```javascript
import { log } from 'weconsole';

// 使用原始 console.log（不会被 WeConsole 监控）
log('log', '这条日志不会出现在 Console 面板中');

// 使用原始 console.error
log('error', '这条错误不会被监控', new Error('test'));

// 使用原始 console.warn
log('warn', '这条警告不会被监控');

// 使用原始 console.info
log('info', '这条信息不会被监控');

```

--------------------------------

### Custom Action Management

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

APIs for adding, removing, and managing custom actions within WeConsole.

```APIDOC
## Add Custom Action

### Description
Adds a custom action item. If your custom item needs to display your own component, set the `showMode` of the case to `component`. Register a component named `weconsole-customer` in `app.json`. When a case of a custom action is executed, its result is passed to the `data` property of `weconsole-customer`. Developers can determine the internal display logic based on the `data` property.

### Method
```javascript
addCustomAction(action: WcCustomAction)
```

### Endpoint
N/A (Client-side function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **action** (object) - Required - The custom action object to add.

### Request Example
```json
{
  "id": "myCustomAction",
  "title": "Custom Action Title",
  "autoCase": "show",
  "cases": [
    {
      "id": "showText",
      "button": "View Text",
      "showMode": "text",
      "handler": () => "This is custom text"
    }
  ]
}
```

## Remove Custom Action

### Description
Removes a custom action item by its ID.

### Method
```javascript
removeCustomAction(actionId: string)
```

### Endpoint
N/A (Client-side function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **actionId** (string) - Required - The ID of the custom action to remove.

### Request Example
```json
"myCustomAction"
```
```

--------------------------------

### Add Custom Action with Grid Display

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Create a custom action to display data in a table format. The handler must return an object with 'cols' for column definitions and 'data' for the rows.

```javascript
import { addCustomAction } from 'weconsole';

// 示例3：显示数据表格
addCustomAction({
    id: 'orderList',
    title: '订单列表',
    autoCase: 'showList',
    cases: [
        {
            id: 'showList',
            button: '查看订单',
            showMode: 'grid',  // 以表格方式显示
            handler() {
                return {
                    cols: [
                        { title: '订单号', field: 'orderId', width: 30 },
                        { title: '商品名', field: 'goodsName', width: 40 },
                        { title: '金额', field: 'amount', width: 15 },
                        { title: '状态', field: 'status', width: 15 }
                    ],
                    data: [
                        { id: '1', orderId: 'ORD001', goodsName: '商品A', amount: '99.00', status: '已完成' },
                        { id: '2', orderId: 'ORD002', goodsName: '商品B', amount: '199.00', status: '待支付' },
                        { id: '3', orderId: 'ORD003', goodsName: '商品C', amount: '299.00', status: '已取消' }
                    ],
                    rowHeight: 40,
                    rowHeightMode: 'regular',
                    colMinWidth: 10
                };
            }
        }
    ]
});

```

--------------------------------

### Add WeConsole to XML View

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

Insert the component tag into your XML view file to render the debugging interface.

```xml
<!-- page/component.wxml -->
<weconsole />
```

--------------------------------

### showWeConsole / hideWeConsole - UI Control

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Controls the visibility of the WeConsole entry icon on the screen.

```APIDOC
## showWeConsole()

### Description
Forces the WeConsole entry icon to be displayed.

## hideWeConsole()

### Description
Forces the WeConsole entry icon to be hidden.
```

--------------------------------

### log

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Utility function to invoke original console methods that are not intercepted by WeConsole monitoring.

```APIDOC
## log

### Description
Invokes original console methods (log, error, warn, info) bypassing WeConsole's monitoring system.

### Parameters
- **type** (string) - Required - The console method type ('log', 'error', 'warn', 'info').
- **...args** (any) - Required - Arguments to pass to the console method.
```

--------------------------------

### WeConsole Injection Configuration Interface

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

TypeScript interface defining the configuration options for the injection command.

```ts
interface InjectConfig {
    /** 要注入的小程序项目目录 */
    projectDir: string;
    /** 如果项目已经被注入过了，是否本次注入要进行替换？ */
    replace?: boolean;
    /** 本次注入强行显示weconsole入口图标 */
    forceShow?: boolean;
    /** 注入方式：
     * npm: 以引用npm包的方式注入，但注入后需要开发者工具主动编译才可使用，好处是如果有重复的依赖可以减少代码体积；
     * full: 以全依赖引用的方式注入，无需开发者工具主动编译就可使用，缺点是可能存在依赖包被重复打包代码的问题；
     */
    mode?: 'npm' | 'full';
    /** 注入的小程序项目属于哪个平台？不传时，自动根据目录中的文件特征判断 */
    platform?: 'wx' | 'alipay' | 'xhs' | 'swan';
    /** 注入weconsole标签时传入的fullTop属性值 */
    fullTop?: string;
    /** 注入weconsole标签时传入的adapFullTop属性值 */
    adapFullTop?: string;
    /** 注入weconsole标签时传入的zIndex属性值 */
    zIndex?: number;
    /** 是否在注入时将weconsole的所有JS及组件文件复制到项目根目录？ */
    copy?: boolean;
}
```

--------------------------------

### Add Custom Action with Multiple Buttons

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Define a custom action that presents multiple interaction buttons. Each case can have a different button text and display mode.

```javascript
import { addCustomAction } from 'weconsole';

// 示例4：多个操作按钮
addCustomAction({
    id: 'cacheManager',
    title: '缓存管理',
    autoCase: 'view',
    cases: [
        {
            id: 'view',
            button: '查看缓存',
            showMode: 'json',
            handler() {
                return wx.getStorageInfoSync();
            }
        },
        {
            id: 'clear',
            button: '清空缓存',
            showMode: 'text',
            handler() {
                wx.clearStorageSync();
                return '缓存已清空！';
            }
        }
    ]
});

```

--------------------------------

### WeConsole Component Configuration

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Configure the WeConsole debugging panel UI component in your page or component's JSON file. Supports NPM and direct path references for various mini-program platforms.

```json
// page.json 或 component.json
{
    "usingComponents": {
        // NPM 方式引用（微信小程序）
        "weconsole": "weconsole/subpackage/components/main/index"

        // 普通方式引用
        // "weconsole": "../../weconsole/subpackage/components/main/index"

        // 支付宝小程序 NPM 引用
        // "weconsole": "weconsole/dist/alipay/npm/subpackage/components/main/index"

        // 百度小程序 NPM 引用
        // "weconsole": "weconsole/dist/swan/npm/subpackage/components/main/index"

        // 小红书小程序 NPM 引用
        // "weconsole": "weconsole/dist/xhs/npm/subpackage/components/main/index"
    }
}
```

--------------------------------

### WeConsole Component Properties

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

Available configuration properties for the <weconsole> component.

```javascript
properties: {
    // 组件全屏化后，距离窗口顶部距离
    fullTop: String,
    // 刘海屏机型（如iphone12等）下组件全屏化后，距离窗口顶部距离
    adapFullTop: String,
    // v1.1.0 支持，代表weconsole组件的z-index值
    zIndex: Number,
    // v1.1.0 支持，自定义weconsole图标，传递图片URL
    icon: String,
    // v1.1.0 支持，支持自定义图标样式，传true时同时设置slot="hand"的插槽内容，可定制
    customHand: Boolean
}
```

--------------------------------

### Force Hide WeConsole Entry Icon

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Use `hideWeConsole()` to force the hiding of the WeConsole entry icon. This can be used to control visibility based on user permissions or other conditions.

```javascript
// 强制隐藏入口图标
hideWeConsole();
```

--------------------------------

### WeConsole Component Usage

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Integrate the WeConsole component into your WXML file for basic or full property configuration. Supports custom icon slots for a personalized debugging experience.

```xml
<!-- page.wxml -->
<view class="container">
    <!-- 页面内容 -->
    <view>我的页面内容</view>

    <!-- 基础用法 -->
    <weconsole />

    <!-- 完整属性配置 -->
    <weconsole
        fullTop="44px"
        adapFullTop="88px"
        zIndex="999"
        icon="https://example.com/custom-icon.png"
    />

    <!-- 自定义图标插槽 -->
    <weconsole customHand="{{true}}">
        <view slot="hand" class="my-custom-icon">Debug</view>
    </weconsole>
</view>
```

--------------------------------

### Register WeConsole Component

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

Register the WeConsole component in your page or component configuration file.

```json
// NPM方式引用
"usingComponents": {
    "weconsole": "weconsole/subpackage/components/main/index"
}

// 普通方式引用
"usingComponents": {
    "weconsole": "{复制后的【dist/full】的路径}/subpackage/components/main/index"
}
```

```json
// NPM方式引用
"usingComponents": {
    "weconsole": "weconsole/dist/alipay/npm/subpackage/components/main/index"
}

// 普通方式引用
"usingComponents": {
    "weconsole": "{复制后的【dist/alipay/full】的路径}/subpackage/components/main/index"
}
```

```json
// NPM方式引用
"usingComponents": {
    "weconsole": "weconsole/dist/xhs/npm/subpackage/components/main/index"
}

// 普通方式引用
"usingComponents": {
    "weconsole": "{复制后的【dist/xhs/full】的路径}/subpackage/components/main/index"
}
```

```json
// NPM方式引用
"usingComponents": {
    "weconsole": "weconsole/dist/swan/npm/subpackage/components/main/index"
}

// 普通方式引用
"usingComponents": {
    "weconsole": "{复制后的【dist/swan/full】的路径}/subpackage/components/main/index"
}
```

--------------------------------

### Add Custom Action with JSON Display

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Use addCustomAction to add a custom item to the 'Other' tab that displays JSON data. The handler function should return a JSON object.

```javascript
import { addCustomAction } from 'weconsole';

// 示例1：显示 JSON 数据
addCustomAction({
    id: 'userInfo',
    title: '用户信息',
    autoCase: 'show',
    cases: [
        {
            id: 'show',
            button: '查看',
            showMode: 'json',  // 以 JSON 树方式显示
            handler() {
                return {
                    userId: '123456',
                    nickname: '测试用户',
                    level: 5,
                    permissions: ['read', 'write']
                };
            }
        }
    ]
});

```

--------------------------------

### restore - Disable Monitoring

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Restores the original system variables or functions, effectively stopping the monitoring for the specified scope.

```APIDOC
## restore(scope)

### Description
Restores the original system variables or functions. After restoration, the debugging panel will no longer display data for the specified scope.

### Parameters
#### Parameters
- **scope** (string) - Optional - The specific scope to restore: 'App', 'Page', 'Component', 'Api', or 'Console'. If omitted, restores all.
```

--------------------------------

### Define WeConsole Events and EventEmitter Interface

Source: https://github.com/weimob-tech/weconsole/blob/main/README.md

Defines the available event types for the WeConsole system and the interface for the event emitter used to manage these events.

```typescript
const enum WeConsoleEvents {
    /**UIConfig对象发生变化时 */
    WcUIConfigChange = 'WcUIConfigChange',
    /**入口图标显示性发生变化时 */
    WcVisableChange = 'WcVisableChange',
    /**CanvasContext准备好时，CanvasContext用于JSON树组件的界面文字宽度计算 */
    WcCanvasContextReady = 'WcCanvasContextReady',
    /**CanvasContext销毁时 */
    WcCanvasContextDestory = 'WcCanvasContextDestory',
    /**主组件的宽高发生变化时 */
    WcMainComponentSizeChange = 'WcMainComponentSizeChange'
}

interface IEventEmitter<T = any> {
    on(type: string, handler: EventHandler<T>);
    once(type: string, handler: EventHandler<T>);
    off(type: string, handler?: EventHandler<T>);
    emit(type: string, data?: T);
}
```

--------------------------------

### weconsole UI Component

Source: https://context7.com/weimob-tech/weconsole/llms.txt

The main UI component for the debugging panel, used by adding the <weconsole> tag to pages or components.

```APIDOC
## <weconsole>

### Description
Initializes the debugging panel UI component in the小程序.

### Parameters
#### Attributes
- **fullTop** (string) - Optional - Top offset for the panel.
- **adapFullTop** (string) - Optional - Adaptive top offset.
- **zIndex** (number) - Optional - CSS z-index for the panel.
- **icon** (string) - Optional - URL for a custom icon.
- **customHand** (boolean) - Optional - Enables custom icon slot.
```

--------------------------------

### removeCustomAction

Source: https://context7.com/weimob-tech/weconsole/llms.txt

Removes a previously added custom project from WeConsole using its unique ID.

```APIDOC
## removeCustomAction

### Description
Removes a custom project by its ID.

### Parameters
- **id** (string) - Required - The unique identifier of the custom action to remove.
```
Tokens:
Raw