*這是Zoomla!逐浪CMS開發(fā)團隊的作品鸠按，用于集成zoomla studio系列開發(fā)工具筆記蘸朋。 *
本文主要介紹 vue的調(diào)試工具 vue-devtools 的安裝和使用
工欲善其事, 必先利其器, 快快一起來用vue-devtools來調(diào)試開發(fā)你的vue項目吧
如果你能連上googlg Chrome應用商店次酌，那么一切好說算墨，你只要輸訪問下面網(wǎng)址：
https://chrome.google.com/webstore/category/extensions?h1=zh
然后輸入：vue devtools蹲嚣，就能搜索到應用赚瘦，然后下載了，如下圖所示：
[圖片上傳失敗...(image-1e0d76-1581727892016)]
囿于國內(nèi)環(huán)境無法連接國際版google.com服務寺谤，那么只好親自動手來處理了珍德。
手動部署
Vue DevTools項目的官方主頁位于GitHub上。你可以找到安裝說明矗漾，幫助解決一些問題等等。目前該擴展在Chrome和Firefox中得到支持薄料，同樣Safari也得到了支持敞贡。如果你想從安裝擴展開始，請不要忘了重新加載你的網(wǎng)頁摄职。
** 第一步：到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是數(shù)據(jù)驅(qū)動的, 這樣就能看到對應數(shù)據(jù)了, 方便我們進行調(diào)試
[圖片上傳失敗...(image-2b96a4-1581727892016)]
溫情提示:
1.vue必須引入開發(fā)版, 使用min壓縮版是不能使用devtools進行調(diào)試的
2.安裝后, 需要關(guān)閉瀏覽器, 再重新打開, 才能使用
調(diào)試工具使用指引
從一個應用說起
讓我從一個超級簡單的Vue應用程序開始帶大家去熟悉Vue的DevTools誊役。
[圖片上傳失敗...(image-ab0cec-1581727892016)]
正如你所看到的获列，我有一個輸入字段綁定到一個叫做name的模型，然后是一個列表蛔垢，它遍歷一個cat數(shù)組击孩。首先你可能會注意到你的開發(fā)工具是“宣布”自己的擴展類型 - 以防你忘了注意右邊的標簽。
[圖片上傳失敗...(image-1eaa05-1581727892016)]
點擊Vue選項卡將顯示特定于Vue的選項鹏漆。首先是組件巩梢。在我的應用程序中，我只有一個Root應用程序艺玲，當您單擊它時括蝠，它會右側(cè)顯示可用的數(shù)據(jù)。
[圖片上傳失敗...(image-1709c3-1581727892016)]
這是“l(fā)ive”饭聚，所以如果我輸入字段忌警，它會立即反映在dev tools視圖中。更好的是秒梳，您可以直接在devtools中進行編輯法绵。將鼠標懸停在項目上將使您可以編輯控件：
[圖片上傳失敗...(image-777fec-1581727892016)]
DevTools擴展到數(shù)組-有完全移除或添加items的選項。要添加item酪碘，您需要輸入有效的JSON朋譬，擴展名將在您輸入時提供實時反饋。
[圖片上傳失敗...(image-ab391b-1581727892016)]
[圖片上傳失敗...(image-acefc8-1581727892016)]
DevTools擴展也可以處理computed屬性：
[圖片上傳失敗...(image-e44351-1581727892016)]
我在代碼上在computed屬性添加oldcats函數(shù)婆跑，將cats的數(shù)據(jù)遍歷輸出一個age>10的結(jié)果此熬，DevTools擴展會將這個結(jié)果顯示出來。
[圖片上傳失敗...(image-af1ed5-1581727892016)]
你不能編輯這些值（因為這是computed的；）犀忱，但是如果你在數(shù)據(jù)數(shù)組中編輯一個比10更大的值，它將立即顯示在下面的computed列表中扶关。
[圖片上傳失敗...(image-816031-1581727892016)]
Nice阴汇！可能在computed中查看相關(guān)函數(shù)的數(shù)據(jù)還沒令你感到興奮的話，那么遠程數(shù)據(jù)源呢节槐？
[圖片上傳失敗...(image-5d55dc-1581727892016)]
我使用Star Wars API 作為我的數(shù)據(jù)源搀庶。項目一旦運行，我可以看到devtools擴展中的遠程數(shù)據(jù)铜异，甚至可以編輯它哥倔。
[圖片上傳失敗...(image-871f18-1581727892016)]
自定義組件（Components）
那么自定義組件呢？這里是我定義了一個cat組件的腳本揍庄。坦白地說咆蒿，Vue并沒有在默認情況下使用它，這是一個嚴重的錯誤。
[圖片上傳失敗...(image-5ca52b-1581727892016)]
現(xiàn)在看看devtools如何認識新的組件：
[圖片上傳失敗...(image-aa787e-1581727892016)]
注意它是如何拾取發(fā)送給它的屬性的∥植猓現(xiàn)在我要跳過Vuex選項卡缭黔，直接進入Events。GitHub倉庫中的自述文件不會告訴您一點是“Events”選項卡僅適用于組件所定制的自定義事件蒂破。所以當我使用了一個簡單的@ click =“doSomethingYo”測試馏谨，它并沒有呈現(xiàn)，一開始我認為它在渲染的時候被破壞了其實并不是的附迷。在上面的代碼示例中惧互，您可以看到我有一個click事件，但是點擊它沒有發(fā)生任何事情挟秤。我不得不修改代碼來觸發(fā)出新的事件壹哺。
[圖片上傳失敗...(image-622e29-1581727892016)]
有了這個，你現(xiàn)在可以看到記錄的events艘刚。有趣的是管宵，devtools擴展會讓你知道哪一個事件被解雇了：
[圖片上傳失敗...(image-10e96f-1581727892016)]
點擊標簽，然后event讓你檢查是什么觸發(fā)了它和其他額外的信息攀甚。
[圖片上傳失敗...(image-706136-1581727892016)]
使用Vuex
現(xiàn)在讓我們看看Vuex箩朴。2017年12月，Raymond Camden的博客上發(fā)布了一個示例應用程序秋度，它利用Vuex構(gòu)建了一個簡單的股票游戲炸庞。這就是Vue DevTools的真正意義所在。您可以深入了解存儲中的數(shù)據(jù)以及運行的突變列表荚斯。
[圖片上傳失敗...(image-ac6e61-1581727892016)]
左邊的是“l(fā)ive”埠居，在股票應用中非常酷事期，因為它有一個“心跳”滥壕，每隔幾秒就會發(fā)生一次突變。點擊它們可以提供有關(guān)特定突變的詳細信息兽泣。
[圖片上傳失敗...(image-daa9d8-1581727892016)]
更酷的是你可以通過一個特定的突變來拒絕或回滾你的存儲狀態(tài)绎橘。
[圖片上傳失敗...(image-4ff2e0-1581727892016)]
您還可以使用導出/導入命令來保存/恢復您的Vuex狀態(tài)。這對于調(diào)試問題是非常有用的唠倦。
