### devTools.install(vm, options)
Source: https://context7.com/reborn-net/unidevtools/llms.txt
Installs and initializes the UniDevTools debugger as a Vue plugin. It registers global interceptors, draws the floating bubble, and sets up event listeners. The `vm` parameter is the Vue instance, and `options` is a configuration object. After installation, common methods can be accessed via the global `uni.$dev` object.
```APIDOC
## devTools.install(vm, options) — 安装并初始化调试工具
在 Vue 应用入口将 DevTools 以插件形式挂载到 Vue 实例，完成全局拦截器注册、气泡绘制、事件总线监听等初始化工作。`vm` 为 Vue 实例，`options` 为配置项对象（若省略则使用默认配置）。安装后可通过 `uni.$dev` 全局对象访问常用方法。
```javascript
// main.js（Vue3 + UniApp CLI 模式）
import { createSSRApp } from 'vue';
import App from './App.vue';
import devTools from './devTools/index.js';
import devToolsConfig from './devTools/config.js';
export function createApp() {
const app = createSSRApp(App);
// 将调试工具挂载为 Vue 插件
app.use(devTools, {
status: true, // 启用调试工具总开关
route: '/devTools/page/index', // 调试面板路由（不建议修改）
bubble: {
status: true, // 显示悬浮气泡入口
text: 'DevTools',
color: '#ffffff',
bgColor: 'rgba(250, 53, 52, 0.7)',
},
console: { status: true, isOutput: true }, // console 日志拦截
network: { status: true }, // 网络请求拦截
error: { status: true }, // 全局错误拦截
logs: { status: true }, // 运行日志上报
uniBus: { status: true }, // uni 事件总线监听
pageStatistics: { status: true }, // 页面访问统计
});
return { app };
}
// 安装后可在任意组件或 App.vue 中调用：
// uni.$dev.show() → 打开调试面板
// uni.$dev.hide() → 关闭调试面板
// uni.$dev.logReport(msg) → 上报自定义日志
// uni.$dev.errorReport(err, trace, type) → 上报错误
```
```
--------------------------------
### Install UniDevTools as a Vue Plugin
Source: https://context7.com/reborn-net/unidevtools/llms.txt
Mount UniDevTools as a Vue plugin in your application's entry point. Configure various debugging modules like console, network, and error logging. Access common methods via the global `uni.$dev` object after installation.
```javascript
import { createSSRApp } from 'vue';
import App from './App.vue';
import devTools from './devTools/index.js';
import devToolsConfig from './devTools/config.js';
export function createApp() {
const app = createSSRApp(App);
// 将调试工具挂载为 Vue 插件
app.use(devTools, {
status: true, // 启用调试工具总开关
route: '/devTools/page/index', // 调试面板路由（不建议修改）
bubble: {
status: true, // 显示悬浮气泡入口
text: 'DevTools',
color: '#ffffff',
bgColor: 'rgba(250, 53, 52, 0.7)',
},
console: { status: true, isOutput: true }, // console 日志拦截
network: { status: true }, // 网络请求拦截
error: { status: true }, // 全局错误拦截
logs: { status: true }, // 运行日志上报
uniBus: { status: true }, // uni 事件总线监听
pageStatistics: { status: true }, // 页面访问统计
});
return { app };
}
```
--------------------------------
### errorReport(msg, trace, type)
Source: https://context7.com/reborn-net/unidevtools/llms.txt
Actively reports error information to the Error module in DevTools. The `type` parameter indicates the error source: `'ve'` (Vue template error), `'vw'` (Vue warning), `'oe'` (onError global error), `'n'` (normal error). Vue's `errorHandler` and `warnHandler` are automatically managed upon plugin installation, so manual calls are not needed for those. Errors caught in `try/catch` blocks within business logic require manual reporting.
```APIDOC
## errorReport(msg, trace, type) — 错误上报
将错误信息主动上报至 DevTools 的 Error 模块。`type` 参数标识错误来源：`'ve'`（Vue 模板错误）、`'vw'`（Vue 警告）、`'oe'`（onError 全局错误）、`'n'`（普通错误）。安装插件时 Vue 的 `errorHandler` 和 `warnHandler` 会被自动接管，无需手动调用；业务中的 `try/catch` 异常需手动上报。
```javascript
// App.vue — 捕获 uni 全局 onError 事件（不在 Vue 错误处理范围内）
import { onError } from '@dcloudio/uni-app';
onError((err) => {
uni.$dev.errorReport(err, 'at App.vue onError', 'oe');
});
// 业务代码中手动上报 catch 到的错误
async function submitOrder(orderData) {
try {
const res = await uni.request({
method: 'POST',
url: '/api/order/create',
data: orderData,
});
return res.data;
} catch (error) {
// 上报到 DevTools Error 面板，并注明页面/模块来源
uni.$dev.errorReport(
error, // Error 对象或字符串
'at pages/order/submit.vue', // 调用堆栈/位置说明
'n', // 普通错误类型
);
throw error;
}
}
// DevTools 面板中可见的错误记录结构：
// { t: 1715000000000, m: "...", tr: "at pages/...", p: "pages/order/submit", type: "n" }
```
```
--------------------------------
### Apply General Icon CSS
Source: https://github.com/reborn-net/unidevtools/blob/main/src/tmui/tool/tmicon/demo_index.html
Include this CSS in your project once to style the icons. It sets up basic properties like size and alignment.
```css
```
--------------------------------
### Applying TMUI Icons
Source: https://github.com/reborn-net/unidevtools/blob/main/src/tmui/tool/tmicon/demo_index.html
Use the 'tmicon' class along with the specific icon class to display an icon. Ensure 'tmicon' is correctly configured as your font-family.
```html
```
--------------------------------
### Control Debug Panel Visibility Programmatically
Source: https://context7.com/reborn-net/unidevtools/llms.txt
Use `uni.$dev.show()` and `uni.$dev.hide()` to control the debugging panel. `hide()` supports an optional `navigateToUrl` option for redirection. Production environments can trigger `show()` via specific user interactions like typing a secret phrase in a search bar.
```javascript
// 在任意页面或组件中调用
// 打开调试面板
uni.$dev.show();
// 关闭调试面板并跳转到指定页面
uni.$dev.hide({ navigateToUrl: '/pages/home/index' });
// 生产环境隐藏入口示例：监听搜索框输入密码触发
// pages/search/index.vue
function onSearchInput(keyword) {
if (keyword === '__devtools__') {
uni.$dev.show();
}
}
// 通过 uni 事件总线触发（跨页面调用）
uni.$emit('devTools_showDialog'); // 打开
uni.$emit('devTools_closeDialog'); // 关闭
```
--------------------------------
### Initialize Tab Functionality with jQuery
Source: https://github.com/reborn-net/unidevtools/blob/main/src/tmui/tool/tmicon/demo_index.html
This JavaScript code, using jQuery, handles the tab switching logic for the content. It shows the first tab by default and toggles visibility on click.
```javascript
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
```
--------------------------------
### devTools.show() / devTools.hide()
Source: https://context7.com/reborn-net/unidevtools/llms.txt
Programmatically controls the visibility of the debugging floating window. In production environments, the floating bubble can be hidden, and the debugging panel can be triggered by specific interactions (e.g., typing `__devtools__` in a search box). The `hide()` method supports an optional `navigateToUrl` parameter to navigate to a specified page after closing.
```APIDOC
## devTools.show() / devTools.hide() — 打开 / 关闭调试面板
以编程方式控制调试浮窗的显示与隐藏。生产环境中可关闭悬浮气泡（`bubble.status: false`），通过特定交互（如在搜索框输入 `__devtools__`）触发 `uni.$dev.show()` 来隐蔽地打开调试面板。`hide()` 支持传入 `{ navigateToUrl }` 在关闭后自动跳转页面。
```javascript
// 在任意页面或组件中调用
// 打开调试面板
uni.$dev.show();
// 关闭调试面板并跳转到指定页面
uni.$dev.hide({ navigateToUrl: '/pages/home/index' });
// 生产环境隐藏入口示例：监听搜索框输入密码触发
// pages/search/index.vue
function onSearchInput(keyword) {
if (keyword === '__devtools__') {
uni.$dev.show();
}
}
// 通过 uni 事件总线触发（跨页面调用）
uni.$emit('devTools_showDialog'); // 打开
uni.$emit('devTools_closeDialog'); // 关闭
```
```
--------------------------------
### Report Custom Logs with `logReport`
Source: https://context7.com/reborn-net/unidevtools/llms.txt
Send custom text or objects to the DevTools Logs module using `uni.$dev.logReport(msg)`. This is useful for tracking key business events or API call sequences. Messages include timestamps and current routes, with automatic truncation for large content.
```javascript
// App.vue 中记录应用启动参数
import { onLaunch, onError } from '@dcloudio/uni-app';
onLaunch((ctx) => {
uni.$dev.logReport('appOnLaunch>' + JSON.stringify(ctx));
// 输出示例: { t: 1715000000000, m: "appOnLaunch>{"path":"pages/index/index",...}" }
});
// 业务代码中手动上报关键节点
async function fetchUserInfo(userId) {
uni.$dev.logReport(`fetchUserInfo start > userId=${userId}`);
try {
const res = await uni.request({ url: `/api/user/${userId}` });
uni.$dev.logReport(`fetchUserInfo success > code=${res.data.code}`);
return res.data;
} catch (err) {
uni.$dev.logReport(`fetchUserInfo fail > ${err.message}`);
throw err;
}
}
// 直接通过挂载的全局属性调用（Vue3）
// this.$logReport(msg) 或 uni.$dev.logReport(msg)
```
--------------------------------
### Link TMUI Icon Stylesheet
Source: https://github.com/reborn-net/unidevtools/blob/main/src/tmui/tool/tmicon/demo_index.html
Include this line in your HTML to load the TMUI icon font classes. Ensure the path to 'iconfont.css' is correct relative to your HTML file.
```html
```
--------------------------------
### Include Icon Font Script
Source: https://github.com/reborn-net/unidevtools/blob/main/src/tmui/tool/tmicon/demo_index.html
Add this script tag to your HTML to load the generated icon font code.
```html
```
--------------------------------
### Applying an Icon with Font Code
Source: https://github.com/reborn-net/unidevtools/blob/main/src/tmui/tool/tmicon/demo_index.html
Use a span element with the 'tmicon' class and the appropriate character code to display an icon. Ensure 'tmicon' is correctly set as the font-family in your project.
```html
3
```
--------------------------------
### Define TMIcon Font with @font-face
Source: https://github.com/reborn-net/unidevtools/blob/main/src/tmui/tool/tmicon/demo_index.html
This CSS rule is essential for loading the custom 'tmicon' font. Ensure this is included in your project's CSS to display the icons correctly. The font data is embedded as a base64 encoded WOFF file.
```css
@font-face {
font-family: 'tmicon';
src:
url('data:application/x-font-woff;charset=utf-8;base64,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' format('woff');
font-weight: normal;
font-style: normal;
}
```
--------------------------------
### Display Specific Icon with SVG
Source: https://github.com/reborn-net/unidevtools/blob/main/src/tmui/tool/tmicon/demo_index.html
Use this SVG structure to display a chosen icon by referencing its name in the xlink:href attribute. Ensure the class "icon" is applied.
```html
```
--------------------------------
### logReport(msg)
Source: https://context7.com/reborn-net/unidevtools/llms.txt
Reports custom text or objects to the Logs module within the DevTools debugging panel. Messages are automatically timestamped and include the current page route. Content exceeding the cache size limit is truncated. This method is useful for logging key business events, such as user actions or API call sequences.
```APIDOC
## logReport(msg) — 自定义日志上报
将自定义文本或对象上报至 DevTools 的 Logs 日志模块，可在调试面板中查看。消息会自动附带时间戳和当前页面路由，超出缓存大小限制的内容会被自动截断。常用于记录业务关键节点（如用户行为、接口调用时序）。
```javascript
// App.vue 中记录应用启动参数
import { onLaunch, onError } from '@dcloudio/uni-app';
onLaunch((ctx) => {
uni.$dev.logReport('appOnLaunch>' + JSON.stringify(ctx));
// 输出示例: { t: 1715000000000, m: "appOnLaunch>{\"path\":\"pages/index/index\",...}" }
});
// 业务代码中手动上报关键节点
async function fetchUserInfo(userId) {
uni.$dev.logReport(`fetchUserInfo start > userId=${userId}`);
try {
const res = await uni.request({ url: `/api/user/${userId}` });
uni.$dev.logReport(`fetchUserInfo success > code=${res.data.code}`);
return res.data;
} catch (err) {
uni.$dev.logReport(`fetchUserInfo fail > ${err.message}`);
throw err;
}
}
// 直接通过挂载的全局属性调用（Vue3）
// this.$logReport(msg) 或 uni.$dev.logReport(msg)
```
```
--------------------------------
### Define TMUI Icon Styles
Source: https://github.com/reborn-net/unidevtools/blob/main/src/tmui/tool/tmicon/demo_index.html
Define the CSS class for TMUI icons to ensure correct font family, size, and rendering. This is essential for displaying icons properly.
```css
.tmicon {
font-family: "tmicon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
```