轉載：https://www.cnblogs.com/chenhuichao/p/11039427.html
本文主要介紹 vue的調試工具 vue-devtools 的安裝和使用
工欲善其事, 必先利其器, 快快一起來用vue-devtools來調試開發你的vue項目吧
安裝:
1.到github下載：（！下載一定要記得是master主分支的代碼，默認克隆后進入的是dev分支，執行npm run build會報錯，執行git checkout master切換到master主分支）
git clone https://github.com/vuejs/vue-devtools
2.在vue-devtools目錄下安裝依賴包
|
1
2
|
cd vue-devtools
npm install
|
3.依賴包下載完后執行npm run build,編譯打包成功后會在shells下生成chrome文件夾。此文件夾就是用來放入chrome的擴展程序。
npm run build
4.擴展Chrome插件
打開Chrome瀏覽器 >選擇更多工具>擴展程序 >打開開發者模式
點擊加載已解壓的擴展程序, 找到剛才生成的chrome文件夾，選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖
6. vue-devtools使用
vue項目, 打開f12, 選擇vue就可以使用了.
vue是數據驅動的, 這樣就能看到對應數據了, 方便我們進行調試
怎么樣, 是不是感覺工作效率提高了呢
溫情提示:
1.vue必須引入開發版, 使用min壓縮版是不能使用devtools進行調試的
2.安裝后, 需要關閉瀏覽器, 再重新打開, 才能使用