參考自? 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)的組件等沼沈。
