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

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

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

windows 平臺(tái)提供的是壓縮包，下載解壓后，雙擊 Vuetron.exe 即可運(yùn)行，另外兩個(gè)平臺(tái)提供的應(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()],
});

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

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

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

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

截圖來自 vuetron 的官方文檔。