原文地址 ：https://blog.csdn.net/lzy_1112/article/details/78960744
vue-devtools是一款基于chrome瀏覽器的插件么介，用于vue應(yīng)用的調(diào)試撵摆，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率。幫助我們快速的調(diào)試開發(fā)vue應(yīng)用囚灼。
1.從github上找到vue-devtools-master 一定要是master 我踩了這個(gè)坑...
2.解壓下載好的文件，
進(jìn)入到vue-devtools目錄祭衩，安裝項(xiàng)目所需要的依賴包灶体。
安裝方法：npm install 或者 cnpm install （注：cnpm命令是國(guó)內(nèi)的鏡像，速度會(huì)快一些）
(安裝方法的前提是：要先裝node.js https://blog.csdn.net/u010255310/article/details/52205132 )
npm install
3.編譯項(xiàng)目文件汪厨。
編譯方法：npm run build
npm run build
4.修改安裝目錄vue-devtools-master\shells\chrome 中 的manifest.json文件赃春。
persistent參數(shù)改為true，
訪問協(xié)議是否包含：1.http:///; 2.https:///; 3.file:///*;
image.png
5.添加至瀏覽器：
添加方法：在chrome瀏覽器輸入地址：“chrome://extensions/”進(jìn)入擴(kuò)展程序頁(yè)面劫乱，然后點(diǎn)擊“加載已解壓的擴(kuò)展程序...”按鈕织中；選擇vue-devtools-master>shells目錄下的Chrome文件夾；還需允許文件地址是否訪問衷戈。如果看不到“加載已解壓的擴(kuò)展程序...”按鈕狭吼，先勾選“開發(fā)者模式”。
添加方法
6.使用：
打開我們的vue應(yīng)用殖妇，打開調(diào)試刁笙，點(diǎn)擊vue擴(kuò)展圖標(biāo)，就可以使用了。如下圖：
vue
注：如果點(diǎn)擊vue擴(kuò)展圖標(biāo)還是提示：
Vue.jsis detectedonthis page. Open DevToolsand lookfor the Vue panel.
可以檢查下你是否使用的是壓縮版本的vue.min.js疲吸，使用vue.min.js默認(rèn)為生產(chǎn)環(huán)境的座每，需要改為vue.js.
