调试模式

TechUI 组件库内置了强大的调试模式，用于在开发阶段对组件、状态和服务进行深入监控。激活调试模式后，您可以通过浏览器 Console 区域执行特定的全局函数，获取实时的组件状态、DOM 监控信息和服务详情。

如何启用调试模式

在您的应用的main.js中，初始化 TechUI Core 模块 时，传入 debug: true 参数即可激活调试模式。

const app = createApp(App);

const params = {
  app,
  license,
  licenseConfig,
  keychain,
  debug: true,      // <<< 激活调试模式的关键
  features:{
    echarts: true,  
    admin: true,
  }
}

TechUIInit(params).then(() => {
  app.use(router)
  app.use(store)
  app.mount('#app')
})

调试工具与监控函数

当调试模式成功启用后，打开浏览器的 开发者工具 (Console 区域)，您将看到一条提示信息：

TechUI: 调试模式已启用！执行 tuiDebugMonitor() 或 tuiServiceState() 以获取调试信息！

您可以通过执行这两个全局函数，获取不同维度的调试数据。

全局服务状态监控

执行 tuiServiceState() 将返回一个包含所有 TechUI 全局响应式状态的 Proxy 对象（即 $tState）。

主要作用： 检查 TechUI 核心服务的配置、全局变量和运行时状态。

状态对象	描述	示例监控内容 (基于 $tState)
ADMIN	后台管理系统模块状态。	routerInited (路由是否初始化)、tabs (当前打开的 Tab 列表)。
globalConfig	用户的全局配置。	platform (平台)、theme (主题)、themeScheme (主题配色方案)、maskBlur (遮罩模糊开关)。
globalParams	全局参数。	blurSaturate、blurRange、initDur。
globalState	运行时全局状态。	fullScreen (是否全屏)、resizeCounter (窗口尺寸变化次数)。
deviceInfo	设备的硬件信息。	type (设备类型如 pc-sm)、resolutionH/V (分辨率)、orientation (方向)。
viewTrans	视图转场动画配置。	curName (当前转场名称如 vt-overlap)、curTarget (当前转场目标如 root)、curDur (转场时长)。
themePalette	当前激活主题的颜色变量数据。	name (主题名称如 darkBlue)。
...	...	...

关于$tState中的所有状态对象的释义，请查阅 全局服务-全局状态 章节

组件行为监控

执行 tuiDebugMonitor() 将返回一个详细的监控对象，用于跟踪页面中与 TechUI 相关的 DOM、事件和计时器行为。

主要作用： 诊断性能问题、事件冲突或组件生命周期中的异常。

监控类别	描述	示例监控内容
tResize Debug Info	监控所有使用了 v-tui-resize 指令的元素的尺寸变化。	元素对应的 CSS 类名 (tui-root theme-darkBlue...)。
tMutation Debug Info	监控 DOM 结构或属性变化的元素。	元素的前缀/后缀、内部类名 (tui-prefix, tui-scroller-inner)。
tEvent Debug Info	列出所有通过 TechUI 封装的事件绑定。	事件类型 (click, mousemove, wheel)、事件名称/目标 (menuDir_x_click, popOverDir_y_mouseenter)。
tTimer Debug Info	监控所有通过 TechUI 封装的 setTimeout 计时器。	记录正在运行或已完成的计时器数量。
tInterval Debug Info	监控所有通过 TechUI 封装的 setInterval 计时器。	记录正在运行或已完成的间隔计时器数量。