This page is translated by Google Cloud Translation API

Switch to Chinese

uni-vue-devtools

新增于HBuilderX 3.7.0 及 cli 3.0.0-Alpha-3070020230117001+

Only supports vue3. Vue2 is not supported yet

uni-vue-devtools is a uni-app project debugging tool developed based on vue-devtools.

During web development, developers can install the vue devtools plugin in chrome. But apps and MiniApp were not available in the past.

Now HBuilderX integrates this function, which can be used in web, app and MiniApp.

Vue devtools provides 2 features:

1. It is convenient to view data, modify data and view the effect in real time on the page
2. Can review custom vue components (excluding built-in components)

Platform Difference Description

App-vue	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序
√	√	√	√	√	√	√	√

Precautions:

• uni-vue-devtools can only inspect custom vue components, not built-in base components.
• Apps and MiniApp not currently support script setup syntactic sugar.

How to use in HBuilderX

Under the HBuilderX run menu, there is a Automatically open Vue Devtools button for each running platform,

After checking, Vue Devtools will be automatically opened when running to the corresponding platform. After the service starts, it will automatically open a pop-up window and display the pending connection status.

After the corresponding platform project runs, a connection will be established with the pop-up window.

If you do not need to enable Vue Devtools by default, but temporarily need Devtools debugging during the development process, you can click the Vue icon button in the upper right corner of the console,

This will restart the development service in Devtools mode.

Tips:

• If the Devtools popup is open and not in the foreground, activate the Devtools popup to the foreground by clicking the console vue icon.

How to use the CLI

If you don't use HBuilderX to develop uni-app, you can also use vue devtools via cli.

1. Installation

npm install @dcloudio/uni-vue-devtools --save-dev

2. Run the project with devtools parameters

npm run dev:%PLATFORM% --devtools

After the service is started, it will automatically open a page in the default browser and display the pending connection status.

After the corresponding platform project runs, it will establish a connection with this page.

common problem

1. The HBuilderX project runs to the WeChat developer tools, and the Devtools pop-up window component tree is lost after modifying the page data?
   Answer: The hot reload of WeChat developer tools does not synchronize data, and the hot reload is turned off.

2. HBuilderX 项目运行到百度开发者工具，修改页面数据后 Devtools 数据未更新？
   答：百度开发者工具隔离编译模式热更新未同步数据问题，切换依赖分析编译模式。

3. uni.addInterceptor 修改 request url 导致报错 未能获取局域网地址，本地调试服务不可用?
   答：uni-vue-devtools 依赖本地服务通信，故修改 request url 应绕开相关服务，特征为 http:localhost|本机ip:端口。