前言
vue-devtools是一款基於chrome遊覽器的外掛，用於除錯vue應用，這可以極大地提高我們的除錯效率。接下來我們就介紹一下vue-devtools的安裝。
chrome商店直接安裝
vue-devtools可以從chrome商店直接下載安裝，非常簡單，這裡就不過多介紹了。不過要注意的一點就是，需要翻牆才能下載。
手動安裝
第一步：找到vue-devtools的github專案，並將其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools.git複製程式碼第二步：安裝專案所需要的npm包
npm install //如果太慢的話，可以安裝一個cnpm, 然後命令換成 cnpm install複製程式碼第三步：編譯專案檔案
npm run build複製程式碼第四步：新增至chrome遊覽器
遊覽器輸入地址“chrome://extensions/”進入擴充套件程式頁面，點選“載入已解壓的擴充套件程式...”按鈕，選擇vue-devtools>shells下的chrome資料夾。
/**
*如果看不見“載入已解壓的擴充套件程式...”按鈕，則需要勾選“開發者模式”。
*/複製程式碼
到此新增完成，效果圖如下：
鑑於評論中很多小夥伴們編譯不成功，我這裡把編譯過的檔案上傳了百度雲，後續步驟依舊，並且還附上了一個.crx檔案，在chrome擴充程式頁面上把檔案拖進去即可安裝。若百度雲失效可文章下留言，我看到後會重新生成連結。
連結:https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg 密碼:1hsv複製程式碼谷歌訪問助手
下載地址：www.ggfwzs.com/
下載的壓縮包解壓之後有一個.crx檔案以及一個使用教程，小夥們可以按照這個教程進行安裝。安裝之後，你的瀏覽器會多一個谷歌訪問助手的外掛。點選外掛會彈出一個皮膚，上面有一個調整擴充程式商店的連結，點選調整之後你會開啟一個和chrome商店一樣的頁面，在這上面你可以隨心所欲安裝你的外掛。
結語：vue-devtools如何使用
當我們新增完vue-devtools擴充套件程式之後，我們在除錯vue應用的時候，chrome開發者工具中會看一個vue的一欄，點選之後就可以看見當前頁面vue物件的一些資訊。vue-devtools使用起來還是比較簡單的，上手非常的容易，這裡就不細講其使用說明了。
