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資料夾。

/** *如果看不見“載入已解壓的擴充套件程式...”按鈕，則需要勾選“開發者模式”。 */

到此新增完成，效果圖如下：