### Importing and Using DevTools in main.js (Vue 2)

Source: https://dev.api0.cn/guide/use

In your main.js file for Vue 2 projects, import the devTools and its configuration, then use Vue.use() to mount it. Also, register the mpDevBubble component for小程序.

```javascript
import Vue from 'vue'
import App from './App'

//挂载Devtools
import devTools from "./devTools/index.js";
import devToolsConfig from './devTools/config.js';
Vue.use(devTools, devToolsConfig)

//注册小程序端专用的拖动浮标组件
import mpDevBubble from './devTools/core/components/mpDevBubble.vue'
Vue.component("mpDevBubble", mpDevBubble)

... 
const app = new Vue({...})
```

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

### Importing and Using DevTools in main.js (Vue 3)

Source: https://dev.api0.cn/guide/use

For Vue 3 projects, import devTools and its configuration, then use app.use() to mount it within the createApp function. Register the mpDevBubble component similarly.

```typescript
import devTools from "./devTools/index.js";
import devToolsConfig from './devTools/config.js';
import mpDevBubble from './devTools/core/components/mpDevBubble.vue'

export function createApp() {
  const app = createSSRApp(App);

  //挂载Devtools
  app.use(devTools, devToolsConfig)
  //注册小程序端专用的拖动浮标组件
  app.component("mpDevBubble", mpDevBubble)

  return {app,...}; 
}
```

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

### Show Debugging Panel with UniDevTools

Source: https://dev.api0.cn/guide/api

Call `uni.$dev.show()` to open the debugging panel. It is recommended to use this method in production environments instead of the debug bubble.

```javascript
uni.$dev.show()
```

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

### UniDevTools Directory Structure

Source: https://dev.api0.cn/guide/install

This illustrates the expected directory layout after extracting the UniDevTools source code. Pay attention to the placement of core files and the devTools directory.

```tree
├─pages
│  ├─ 项目页面文件
|  └─ ...
├─devTools   [DevTools调试工具目录]
│  ├─core         核心源码
│  ├─page         浮窗页面及组件
│  ├─index.js     入口文件
│  ├─config.js    配置文件
│  └─tool.vue     自定义工具组件
├─App.vue
├─main.js
├─manifest.json
├─package.json
├─uni.scss
└─...
```

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

### Open Debugging Popup

Source: https://dev.api0.cn/guide/api

The `show()` function is used to display the debugging popup window. This can be triggered by clicking the debug bubble or by calling the function directly.

```APIDOC
## Open Debugging Popup

### Description
Opens the debugging popup window. This can be initiated by interacting with the debug bubble or programmatically via the `uni.$dev.show()` function. It is recommended to close the debug bubble in production environments and use this function to open the debug page.

### Method
`uni.$dev.show()`

### Endpoint
N/A (This is a function call, not an HTTP endpoint)

### Parameters
None

### Request Example
```typescript
uni.$dev.show()
```

### Response
#### Success Response (200)
No specific response details provided in the source.

#### Response Example
No example provided in the source.
```

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

### Report Logs with UniDevTools

Source: https://dev.api0.cn/guide/api

Use `uni.$dev.logReport()` to send log data. This data is recorded in the Logs system's runtime logs.

```javascript
uni.$dev.logReport("上报的日志内容")
```

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

### Mounting Log Listener in App.vue (Vue 3)

Source: https://dev.api0.cn/guide/use

For Vue 3 projects, use the imported onError and onLaunch functions to mount the devTools error reporting and app launch logging.

```typescript
import { onError, onLaunch } from '@dcloudio/uni-app';
onError((err)=>{
  try {
    // 挂载devTools全局报错拦截
    uni.$dev.errorReport(err, "at App.vue onError", "oe");
  } catch (error) {}
})
onLaunch((ctx) => {
  try {
    // 挂载APP启动日志提交
    uni.$dev.logReport("appOnLaunch>" + JSON.stringify(ctx));
  } catch (error) {}
})
```

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

### Mounting Log Listener in App.vue (Vue 2)

Source: https://dev.api0.cn/guide/use

Implement the onError and onLaunch lifecycle hooks in your App.vue for Vue 2 projects. Use uni.$dev.errorReport for global error interception and uni.$dev.logReport for app launch logs.

```javascript
export default {
  onError(err) {
    try {
      // 挂载devTools全局报错拦截
      uni.$dev.errorReport(err, "at App.vue onError", "oe");
    } catch (error) {}
  },
  onLaunch(option) {
    try {
      // 挂载APP启动日志提交
      uni.$dev.logReport("appOnLaunch>" + JSON.stringify(option));
    } catch (error) {}
  }
}
```

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

### DevTools Configuration Object

Source: https://dev.api0.cn/guide/config

This JavaScript object contains all configurable settings for the UniDevTools. Adjust these parameters to control the behavior and resource usage of the debugging tool.

```javascript
let config = {
  status: true, //调试工具总开关
  route: "/devTools/page/index", // 调试页面的路由，不建议更改
  bubble: { //调试弹窗气泡设置
    status: true, // 气泡标签是否显示，生产环境建议关闭
    text: "调试工具", // 气泡上展示的文字
    color: "#ffffff", // 气泡文字颜色
    bgColor: "rgba(250, 53, 52,0.7)", // 气泡背景颜色
  },

  // 注意： 以下配置不建议更改

  pageStatistics: {// 页面统计开关
    status: true, // 统计状态开关
    size: 1024 * 100, // 缓存上限，单位byte
    dayOnlineRowMax: 30, // 活跃数据缓存天数
  },
  console: { //console日志配置
    status: true, //功能总开关
    isOutput: true, //打印的日志是否对外输出到浏览器调试界面，建议在生产环境时关闭
    cache: {
      status: true, //是否启用本地缓存
      size: 512 * 1024, //缓存上限，单位byte
      rowSize: 1024 * 4,//单条记录缓存上限，单位byte
    },
  },
  uniBus: { // uni event bus 监听设置
    status: true,
    cache: {
      status: true,
      size: 1024 * 512, // bus调用日志上限 byte
      rowSize: 1024 * 10,
      countMaxSize: 1024 * 10, // bus统计上限 byte
    },
  },
  error: { //报错拦截配置
    status: true,
    cache: {
      status: true,
      size: 512 * 1024,
      rowSize: 1024 * 4,
    },
  },
  network: { //请求拦截配置
    status: true,
    cache: {
      status: true,
      size: 512 * 1024,
      rowSize: 1024 * 4,
    },
  },
  logs: { //运行日志
    status: true,
    cache: {
      status: true,
      size: 512 * 1024,
      rowSize: 1024 * 4,
    },
  },
};

export default config;
```

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

### Registering SubPackage Route in pages.json

Source: https://dev.api0.cn/guide/use

Add this configuration to your pages.json file to register the devTools page as a subpackage. This ensures compatibility across different platforms like Mini Programs, App, and H5.

```json
{
  "pages": [...],
  "subPackages": [
    {
      "root": "devTools/page",
      "name": "devToolsPage",
      "pages": [
        {
          "path": "index",
          "style": {
            "navigationStyle": "custom"
            // #ifdef APP-PLUS
            ,
            "softinputMode": "adjustResize",
            "backgroundColor": "transparent",
            "animationDuration": 1,
            "animationType": "none",
            "popGesture": "none",
            "bounce": "none",
            "titleNView": false
            // #endif
          }
        }
      ]
    }
  ]
}
```

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

### Using Debug Bubble Component in Vue Pages

Source: https://dev.api0.cn/guide/use

In your page's Vue file, include the <mpDevBubble /> component within the template. This is necessary for小程序 to display the debug bubble, as it cannot dynamically create nodes.

```vue
<template>
  <view>
    ...
    <mpDevBubble />
  </view>
</template>
```

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

### Log Reporting

Source: https://dev.api0.cn/guide/api

The `logReport()` function is used to send log data. The reported data will be recorded in the UniDevTools system's operational logs.

```APIDOC
## Log Reporting

### Description
Reports log data to the UniDevTools system. The data is recorded in the system's operational logs.

### Method
`uni.$dev.logReport(logContent: string)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **logContent** (string) - Required - The content of the log to be reported.

### Request Example
```typescript
uni.$dev.logReport("上报的日志内容")
```

### Response
#### Success Response (200)
No specific response details provided in the source.

#### Response Example
No example provided in the source.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.