*這是Zoomla!逐浪CMS開發團隊的作品，用于集成zoomla studio系列開發工具筆記。 *
本文主要介紹 vue的調試工具 vue-devtools 的安裝和使用
工欲善其事, 必先利其器, 快快一起來用vue-devtools來調試開發你的vue項目吧
如果你能連上googlg Chrome應用商店，那么一切好說，你只要輸訪問下面網址：
https://chrome.google.com/webstore/category/extensions?h1=zh
然后輸入：vue devtools，就能搜索到應用，然后下載了，如下圖所示：
[圖片上傳失敗...(image-1e0d76-1581727892016)]
囿于國內環境無法連接國際版google.com服務，那么只好親自動手來處理了。
手動部署
Vue DevTools項目的官方主頁位于GitHub上。你可以找到安裝說明，幫助解決一些問題等等。目前該擴展在Chrome和Firefox中得到支持，同樣Safari也得到了支持。如果你想從安裝擴展開始，請不要忘了重新加載你的網頁。
** 第一步：到github下載：**
git clone https://github.com/vuejs/vue-devtools
** 第二步：在vue-devtools目錄下安裝依賴包 **
cd vue-devtools
cnpm install
** 第三步：修改manifest.json文件 **
[圖片上傳失敗...(image-602cfc-1581727892016)]
把"persistent":false改成true
[圖片上傳失敗...(image-9c6fa5-1581727892016)]
** 第四步：編譯代碼 **
運行npm命令編譯:
npm run build
** 第五步：安裝擴展Chrome插件 **
進入擴展Chrome插件
Chrome瀏覽器 > 更多程序 > 拓展程序
點擊加載已解壓程序按鈕, 選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖
[圖片上傳失敗...(image-f370da-1581727892016)]
** 第六步： vue-devtools使用 **
vue項目, 打開f12, 選擇vue就可以使用了.
vue是數據驅動的, 這樣就能看到對應數據了, 方便我們進行調試
[圖片上傳失敗...(image-2b96a4-1581727892016)]
溫情提示:
1.vue必須引入開發版, 使用min壓縮版是不能使用devtools進行調試的
2.安裝后, 需要關閉瀏覽器, 再重新打開, 才能使用
調試工具使用指引
從一個應用說起
讓我從一個超級簡單的Vue應用程序開始帶大家去熟悉Vue的DevTools。
[圖片上傳失敗...(image-ab0cec-1581727892016)]
正如你所看到的，我有一個輸入字段綁定到一個叫做name的模型，然后是一個列表，它遍歷一個cat數組。首先你可能會注意到你的開發工具是“宣布”自己的擴展類型 - 以防你忘了注意右邊的標簽。
[圖片上傳失敗...(image-1eaa05-1581727892016)]
點擊Vue選項卡將顯示特定于Vue的選項。首先是組件。在我的應用程序中，我只有一個Root應用程序，當您單擊它時，它會右側顯示可用的數據。
[圖片上傳失敗...(image-1709c3-1581727892016)]
這是“live”，所以如果我輸入字段，它會立即反映在dev tools視圖中。更好的是，您可以直接在devtools中進行編輯。將鼠標懸停在項目上將使您可以編輯控件：
[圖片上傳失敗...(image-777fec-1581727892016)]
DevTools擴展到數組-有完全移除或添加items的選項。要添加item，您需要輸入有效的JSON，擴展名將在您輸入時提供實時反饋。
[圖片上傳失敗...(image-ab391b-1581727892016)]
[圖片上傳失敗...(image-acefc8-1581727892016)]
DevTools擴展也可以處理computed屬性：
[圖片上傳失敗...(image-e44351-1581727892016)]
我在代碼上在computed屬性添加oldcats函數，將cats的數據遍歷輸出一個age>10的結果，DevTools擴展會將這個結果顯示出來。
[圖片上傳失敗...(image-af1ed5-1581727892016)]
你不能編輯這些值（因為這是computed的！），但是如果你在數據數組中編輯一個比10更大的值，它將立即顯示在下面的computed列表中。
[圖片上傳失敗...(image-816031-1581727892016)]
Nice！可能在computed中查看相關函數的數據還沒令你感到興奮的話，那么遠程數據源呢？
[圖片上傳失敗...(image-5d55dc-1581727892016)]
我使用Star Wars API 作為我的數據源。項目一旦運行，我可以看到devtools擴展中的遠程數據，甚至可以編輯它。
[圖片上傳失敗...(image-871f18-1581727892016)]
自定義組件（Components）
那么自定義組件呢？這里是我定義了一個cat組件的腳本。坦白地說，Vue并沒有在默認情況下使用它，這是一個嚴重的錯誤。
[圖片上傳失敗...(image-5ca52b-1581727892016)]
現在看看devtools如何認識新的組件：
[圖片上傳失敗...(image-aa787e-1581727892016)]
注意它是如何拾取發送給它的屬性的。現在我要跳過Vuex選項卡，直接進入Events。GitHub倉庫中的自述文件不會告訴您一點是“Events”選項卡僅適用于組件所定制的自定義事件。所以當我使用了一個簡單的@ click =“doSomethingYo”測試，它并沒有呈現，一開始我認為它在渲染的時候被破壞了其實并不是的。在上面的代碼示例中，您可以看到我有一個click事件，但是點擊它沒有發生任何事情。我不得不修改代碼來觸發出新的事件。
[圖片上傳失敗...(image-622e29-1581727892016)]
有了這個，你現在可以看到記錄的events。有趣的是，devtools擴展會讓你知道哪一個事件被解雇了：
[圖片上傳失敗...(image-10e96f-1581727892016)]
點擊標簽，然后event讓你檢查是什么觸發了它和其他額外的信息。
[圖片上傳失敗...(image-706136-1581727892016)]
使用Vuex
現在讓我們看看Vuex。2017年12月，Raymond Camden的博客上發布了一個示例應用程序，它利用Vuex構建了一個簡單的股票游戲。這就是Vue DevTools的真正意義所在。您可以深入了解存儲中的數據以及運行的突變列表。
[圖片上傳失敗...(image-ac6e61-1581727892016)]
左邊的是“live”，在股票應用中非常酷，因為它有一個“心跳”，每隔幾秒就會發生一次突變。點擊它們可以提供有關特定突變的詳細信息。
[圖片上傳失敗...(image-daa9d8-1581727892016)]
更酷的是你可以通過一個特定的突變來拒絕或回滾你的存儲狀態。
[圖片上傳失敗...(image-4ff2e0-1581727892016)]
您還可以使用導出/導入命令來保存/恢復您的Vuex狀態。這對于調試問題是非常有用的。
