vue-devtools是一款基于chrome瀏覽器的插件仪壮，用于vue應(yīng)用的調(diào)試扶叉，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率胖翰。幫助我們快速的調(diào)試開發(fā)vue應(yīng)用。
第一步：
我們可以先從github上找到vue-devtools的項目撬陵，下載到本地珊皿。下載vue-devtools鏈接。
克隆方法：git clone https://github.com/vuejs/vue-devtools.git
第二步：
解壓下載好的文件巨税，進入到vue-devtools目錄蟋定，安裝項目所需要的依賴包。
安裝方法：npm install 或者 cnpm install （注：cnpm命令是國內(nèi)的鏡像草添，速度會快一些）
第三步：
編譯項目文件溢吻。
編譯方法：npm run build
第四步：
修改安裝目錄vue-devtools\shells\chrome 中 的manifest.json文件。 persistent參數(shù)改為true果元，訪問協(xié)議是否包含：1.http:///; 2.https:///; 3.file:///*;這三種情況
第五步：
添加至瀏覽器：
添加方法：在chrome瀏覽器輸入地址：“chrome://extensions/”進入擴展程序頁面，然后點擊“加載已解壓的擴展程序...”按鈕犀盟；選擇vue-devtools>shells目錄下的Chrome文件夾而晒；還需允許文件地址是否訪問。如果看不到“加載已解壓的擴展程序...”按鈕阅畴，先勾選“開發(fā)者模式”倡怎。如下圖:
第六步：
使用：
打開我們的vue應(yīng)用，打開調(diào)試贱枣，點擊vue擴展圖標监署，就可以使用了。如下圖：
注：如果點擊vue擴展圖標還是提示：
Vue.jsis detectedonthis page. Open DevToolsand lookfor the Vue panel.
可以檢查下你是否使用的是壓縮版本的vue.min.js纽哥，使用vue.min.js默認為生產(chǎn)環(huán)境的钠乏，需要改為vue.js.
