Vue專案中使用Vue.js devTools這款除錯神器，可以極大程度的提高我們的開發效率。

安裝

1、開啟Chrome網上應用商店安裝外掛（自牆）,直接搜尋devTools安裝即可。貴賓傳送陣，請戳這裡→Chrome網上應用商店

2、從github上下載到本地。貴賓傳送陣，請戳這裡→vue-devtools

1)、進入到/vue-devtools目錄下(npm install或者cnpm install)安裝專案所需依賴。

2)、安裝完依賴後(npm run build或者cnpm run build)編譯專案。

3)、編譯完專案後，在/vue-devtools/shell/chrome/manifest.json

4)、在chrome擴充套件程式頁面，開啟“開發者模式”，點選“載入已解壓的擴充套件程式”按鈕，選擇你本地的.../vue-devtools/shell/chrome資料夾, 新增完成後，勾選允許檔案地址是否訪問。

安裝完成後devTools的圖示會出現在瀏覽器的選單欄中。

以上兩種安裝方式告一段落。下面讓我們在vue專案中體驗一下這款除錯神器吧。

使用

執行Vue專案，在Chrome瀏覽器中展示專案（瀏覽器選單欄中的devTools圖示會亮起），按F12開啟開發者工具，在開發者工具的選單欄最後面會看到Vue，選中它就可以盡情的使用了。

當然這樣一頓行雲流水的操作下來，有些人會一次成功，而有些人則不會成功，瀏覽器選單中的devTools圖示亮滴鴨批，但是就是在開發者工具的選單欄最後面看不到Vue。嗯~~~，怎麼肥事小老弟？

請檢視專案的index.html中，對vue.js的引用。你肯定使用了壓縮版的vue.min.js，使用vue.min.js預設為生產環境，會導致devTools不顯示，改為vue.js即可。