摘要：簡介由于小程序開發(fā)工具的封閉，我們無法通過安裝插件來方便地使用調(diào)試我們的項目。這里我們主要使用其對的調(diào)試功能。注截圖來自的官方文檔。

由于小程序開發(fā)工具的封閉，我們無法通過安裝 chrome 插件來方便地使用 vue-devtools 調(diào)試我們的 mpvue 項目。vuetron 是一個 vue.js 的項目調(diào)試工具, 同時支持對 vuex 及 vue-router 的調(diào)試。這里我們主要使用其對 vuex 的調(diào)試功能。

npm install vuetron weapp.socket.io --save-dev

windows 平臺提供的是壓縮包，下載解壓后，雙擊 Vuetron.exe 即可運行，另外兩個平臺提供的應(yīng)該都是安裝包。

windows

mac

linux

配置 webpack 的 alias

需使用 weapp.socket.io 替代 socket.io-client

resolve: {
  extensions: [".js", ".vue", ".json"],
  alias: {
    "@": resolve("src"),
    "socket.io-client": "weapp.socket.io",
    "vue": "mpvue",
  },
},

作為 vuex 的插件引入

import Vue from "vue";
import Vuex from "vuex";
import vuetron from "vuetron";

Vue.use(Vuex);

const store = new Vuex.Store({
  // ...
  plugins: [vuetron.VuetronVuex()],
});

查看并與管理項目當(dāng)前的數(shù)據(jù)

在不同時刻的數(shù)據(jù)之間進(jìn)行切換，或者立即恢復(fù)一組完整的項目數(shù)據(jù)

訂閱特定數(shù)據(jù)來進(jìn)行調(diào)試

事實上 vue-devtools 也提供了一個遠(yuǎn)程調(diào)試工具 vue-remote-devtools，開發(fā)微信公眾號時直接引用一個腳本即可，但是小程序中目前還無法直接使用，需要我們對官方的腳本做些修改，后面有空完善后會再做詳細(xì)介紹。

截圖來自 vuetron 的官方文檔。