Debug Mode

The TechUI component library features a powerful built-in debug mode designed for deep monitoring of components, state, and services during the development phase. Once debug mode is activated, you can execute specific global functions via the browser's Console to access real-time component states, DOM monitoring data, and service details.

How to Enable Debug Mode

To activate debug mode, pass the debug: true parameter when initializing the TechUI Core Module in your application's main.js.

const app = createApp(App);

const params = {
  app,
  license,
  licenseConfig,
  keychain,
  debug: true,      // <<< Key parameter to activate debug mode
  features:{
    echarts: true,  
    admin: true,
  }
}

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

Monitoring Functions

Once debug mode is successfully enabled, open the browser's Developer Tools (Console tab) to see the following prompt:

TechUI: Debug mode enabled! Execute tuiDebugMonitor() or tuiServiceState() to get debug info!

You can execute these two global functions to retrieve debug data across different dimensions.

Monitoring State

Executing tuiServiceState() returns a Proxy object containing all of TechUI's global reactive states (referred to as $tState).

Primary Function: Inspect TechUI core service configurations, global variables, and runtime states.

State Object	Description	Example Monitoring Content (Based on $tState)
ADMIN	Background management system module state.	routerInited (whether router is initialized), tabs (current open tab list).
globalConfig	User global configuration.	platform, theme, themeScheme (theme color scheme), maskBlur (mask blur switch).
globalParams	Global parameters.	blurSaturate, blurRange, initDur.
globalState	Runtime global state.	fullScreen (whether full screen), resizeCounter (window resize count).
deviceInfo	Device hardware info.	type (device type e.g., pc-sm), resolutionH/V, orientation.
viewTrans	View transition animation config.	curName (current transition name e.g., vt-overlap), curTarget (current target e.g., root), curDur (transition duration).
themePalette	Color variable data for the current theme.	name (theme name e.g., darkBlue).
...	...	...

For definitions of all state objects within $tState, please refer to the Global Services - Global State chapter.

Monitoring Behavior

Executing tuiDebugMonitor() returns a detailed monitoring object used to track TechUI-related DOM, event, and timer behaviors within the page.

Primary Function: Diagnose performance issues, event conflicts, or anomalies in component lifecycles.

Monitoring Category	Description	Example Monitoring Content
tResize Debug Info	Monitors size changes of all elements using the v-tui-resize directive.	Corresponding CSS class names of the element (tui-root theme-darkBlue...).
tMutation Debug Info	Monitors elements with DOM structure or attribute changes.	Element prefix/suffix, internal class names (tui-prefix, tui-scroller-inner).
tEvent Debug Info	Lists all event bindings encapsulated by TechUI.	Event type (click, mousemove, wheel), Event name/target (menuDir_x_click, popOverDir_y_mouseenter).
tTimer Debug Info	Monitors all setTimeout timers encapsulated by TechUI.	Records the number of running or completed timers.
tInterval Debug Info	Monitors all setInterval timers encapsulated by TechUI.	Records the number of running or completed interval timers.