在微信开发者工具中使用 Vue Devtools 调试 Vue 项目

使用 Vue 开发微信项目时,一般会用到微信开发者工具,它虽然提供了熟悉的 Chrome 开发者面板,但却不支持插件的安装,这就导致不能通过安装插件的方式来使用 Vue Devtools 调试 Vue 项目。

好在 Vue Devtools 提供了一个独立的版本,可对运行在任意环境里的 Vue 项目进行调试,本文要讲的就是它。

Vue CLI 3

本文所讲的项目是通过 Vue CLI 3 生成的。

Vue Devtools (独立版本)

首先,在项目里安装 Vue Devtools:

1
2
3
yarn add @vue/devtools -D
# 或者
npm install @vue/devtools -D

然后,打开 public/index.html,在 <head> 标签内加上下面这句,表示只在开发环境启用调试服务:

1
2
3
<% if (NODE_ENV === 'development') { %>
<script src="http://localhost:8098"></script>
<% } %>

NPM 脚本

首先,我们在 package.jsonscripts 字段加上如下命令:

1
2
3
4
5
{
"scripts": {
"start-devtools": "vue-devtools"
}
}

然后,就可以通过 yarn start-devtoolsnpm run start-devtools 启动调试服务了。

开始开发

1
yarn serve

如何同时启动调试服务和开发服务?

如上,我们要先启动调试服务,再启动开发服务,能不能将这两步合在一起呢?

答案是可以的。

首先,安装 npm-run-all

1
2
3
yarn add npm-run-all -D
# 或者
npm install npm-run-all -D

接着,在 package.jsonscripts 字段新增命令:

1
2
3
4
5
{
"scripts": {
"dev": "run-p start-devtools serve"
}
}

最后,通过 yarn devnpm run dev 开始开发和调试。