參考自? http://blog.csdn.net/wu__di/article/details/70040059?? ，在原文上有修正。

Vue.js devtools是基于google chrome瀏覽器的一款調(diào)試vue.js應(yīng)用的開發(fā)者瀏覽器擴(kuò)展，可以在瀏覽器開發(fā)者工具下調(diào)試代碼。

安裝步驟：

安裝的方式有三種，一種是在chrome應(yīng)用商店里安裝，第二種是在其他網(wǎng)站下載插件，最后一種是下載源碼，然后安裝。在天朝，第一種方式想必大家都不要去嘗試了，第二種方式給個(gè)鏈接http://www.cnplugins.com/devtool/vuejs-devtools/detail.html? ，本文我們采用第三中方式安裝。

1）首先在github下載devtools源碼，地址：https://github.com/vuejs/vue-devtools

2）下載好后進(jìn)入vue-devtools-master工程 執(zhí)行npm install，下載依賴，然后執(zhí)行npm run start，編譯源程序。

3）編譯完成后，目錄結(jié)構(gòu)如下：

修改shells目錄下的mainifest.json 中的persistent為true：

4）打開谷歌瀏覽器的設(shè)置--->擴(kuò)展程序，并勾選開發(fā)者模式

谷歌瀏覽器：

然后將剛剛編譯后的工程中的shells目錄下，shells文件夾下的整個(gè)chrome文件夾直接拖拽到當(dāng)前瀏覽器中，并選擇啟用，即可將插件安裝到瀏覽器。

360急速瀏覽器：

加載已擴(kuò)展的組建，選擇shells下的chrome文件

5）打開一個(gè)已有的vue項(xiàng)目，我們以todolist項(xiàng)目為例，運(yùn)行項(xiàng)目，然后在瀏覽器中--->設(shè)置--->更多工具--->開發(fā)者工具(F12)，進(jìn)入調(diào)試模式：

安裝完插件后，將會(huì)看到多了vue一欄。選擇vue，就可以在調(diào)試vue項(xiàng)目的過程中查看相應(yīng)的組件等。