Skip to main content
Version: 3.x

Vue DevTools

note

Taro v3.3.2 is supported.

Vue2 is not supported at this time.

When developing mini program you can use Vue DevTools

Usage

1. Installation

Install the Taro plugin in your project @tarojs/plugin-vue-devtools

$ yarn add --dev @tarojs/plugin-vue-devtools

2. Configuring the Taro Plugin

Configure the Taro compile configuration to use @tarojs/plugin-vue-devtools

config/dev.js
config = {
plugins: [
'@tarojs/plugin-vue-devtools'
],
// ...
}

3. Compile project

$ taro build --type weapp --watch

Plugin Parameters

The plugin @tarojs/plugin-vue-devtools has the following parameters.

enabled

boolean

Default value: true

Controls whether to connect to vue-devtools, which will inject backend code into the developer's app when turned on.

hostname

string

Default value:localhost

When localhost is not available, customize the host name of taro connection vue-devtools, which is mostly used for LAN or remote debugging.

port

number

Default value: 8098

The Websocket port used by Vue DevTools.

Caution

  • The version of vue-devtools is forcibly locked, and the code of the @tarojs/plugin-vue-devtools plugin needs to be modified to update the version.

In addition, the current support for devtools is not comprehensive enough, some features need to be magic backend for the mini program environment to achieve, welcome to build ~

  • Support element highlighting.

Detailed Design

For detailed design, see RFC