---
title: Debugging Guide
---

# Debugging Guide

## 1. vConsole

Some online problems require debugging or log output in the real machine. To facilitate viewing the output of the front-end log, the App provides a debugging mode. After turning on the debugging mode, the vConsole button will be displayed in the panel interface. Click it to open the mobile vConsole interface to view the log output.

### 1. How to open

- Click the three dots in the upper right corner of the mini program, or long press the upper right corner [x] and click Open Debug to open vConsole.

<Image src="/images/debug/debug2.png" width="200px" />

### 2. Performance Analysis Tool

- You can use the analysis tool to view the running performance of the mini program from a macro perspective, and judge the performance optimization points based on the values ​​of the corresponding dimensions and optimize them.
- Note: The basic library version must be greater than _2.11.0_
- The performance dimension should be judged based on the hardware performance of the corresponding machine equipment.

#### Opening method:

- Click the three dots on the pill. Open debugging - Click vConsole - Click [Perf] - Switch to the performance tool startup page.

<Image src="/images/debug/perf.png" width="200px" />

- Toggle Log: Used to switch whether to accept the logic layer console log information. It is recommended to turn it off before collecting performance data to avoid the console.log log data interfering with the performance indicators.

- Open FPS monitor: Open FPS monitoring. After opening, click [Performance Monitoring Chart] to switch the indicator dimension, and drag [Performance Monitoring Chart] to move the position.

<Image src="/images/debug/debug1.png" width="200px" />

<Image src="/images/debug/sample-pic.png" width="300px" />

#### FPS: The number of frames rendered per second in the view

The higher the data, the smoother it is, and vice versa.

- 60~50 interval - Excellent
- 50~40 - Good
- 40~ - To be improved

#### MS: Time consumed for rendering each frame

- Time consumed for each frame (in ms). The higher the value, the lower the FPS, and vice versa.

#### MT: Time consumed for communication from the logic layer to the view layer

The time consumed for a successful message from the logic layer to the view layer (in ms). The higher the value, the slower the interactive feedback, and vice versa.

In the dual-threaded mode of the mini program, the communication data between the logic layer and the view layer needs to be serialized and deserialized. The larger the data volume, the higher the time consumed.

- Communication time: It should be maintained below 100ms, and it should be judged based on the performance of the machine and the FPS performance dimension.

- Number of communications: There should be no continuous long-term communication calls. Continuous and large-scale communications may cause congestion and affect interactive feedback.

#### KB: Data size from the logic layer to the view layer

The volume of data successfully sent from the logic layer to the view layer (in KB). The higher the value, the slower the interactive feedback, and vice versa.
The larger the volume, the higher the MT index. Frequent and long-term large data transmission should be avoided. setData uses split path to update the data root.

- Communication volume: The data volume should be maintained at a low value to avoid long-term large data transmission.
- Number of communications: There should not be continuous and long-term communication calls. Continuous and large-scale communications may cause congestion and affect interactive feedback.

## 2. IDE log

- When the IDE runs into problems or crashes, please send the IDE running log to the smart applet team to assist in troubleshooting.
- Log viewing path: Top menu bar - Debug - View log
  - Client: IDE basic running log.
  - Real machine debugging: IDE log during real machine debugging. Upload this log when real machine debugging has problems.
  - Plugin: Plugin-related log.

## 3. IDE Panel Tool

- The panel tool is mainly developed for developers to quickly debug some panel mini-program functions.
<Image src="/images/debug/ide-plugin-panel.png" width="300px" />
- Main functions:
- Device control
  - DP control
  - Device information
  - Device status - Quickly modify the status of the device for simulation debugging
  - Communication log - Display device communication log
- Multi-language management
  - Export
  - Abnormal detection
- Device log
  - Query device log
- Smart device model
  - SDM usage, [For specific usage, see](/en/miniapp/solution-panel/ability/common/sdm/usage)

## 4. Client log

- If the App has abnormalities or flashbacks, you can upload logs to help us better locate and solve the problem.

Upload steps:

- Execute the steps for mini-program running errors, such as App flashbacks, mini-program API call exceptions, etc. Record the execution time.
- Open App Settings - About - Upload Log - Log Upload.
- Take a screenshot of the log pop-up window and record the abnormal trigger time and contact the smart mini program team.

<Image src="/images/debug/debug3.png" width="200px" />

## 5. FAQ

- Q: During the development process, the upper right corner capsule is hidden. Is there any other way to open debugging?
  - You can set the debug mode through [changeDebugMode](/en/miniapp/develop/ray/api/other/changeDebugMode).
  - Please note that it should be turned off when going online.

```js
import { changeDebugMode } from '@ray-js/ray';
changeDebugMode({
  isEnable: true,
  success: function () {
  console.log('success')
  },
  fail: function (e) {
  console.log('fail', e)
  }
})
```

- Q: Why is there no debugging entry for long pressing in some mini programs?
  - Currently, only the preview version and experience version mini programs support the debugging function, and the online version mini programs do not support it.