先導(dǎo)
vue-devtools是一款基于chrome瀏覽器的插件，用于vue應(yīng)用的調(diào)試，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率。幫助我們快速的調(diào)試開發(fā)vue應(yīng)用。
第一步：
我們可以先從github上找到vue-devtools的項(xiàng)目，下載到本地。下載vue-devtools鏈接。
克隆方法：git clone?https://github.com/vuejs/vue-devtools.git
web前端全棧資料粉絲福利（面試題、視頻、資料筆記、進(jìn)階路線）
更多相關(guān)視頻：
0基礎(chǔ)前端利用『HTML+CSS』制作你喜歡的暗黑破壞神網(wǎng)頁開發(fā)：BV1C54y1X7ro
前端發(fā)展簡史，功能以及未來趨勢?。阒档糜^看）：BV1w5411s7e4
給想學(xué)編程又無從下手的小白一些建議：BV1Zf4y117ji
第二步：
? 解壓下載好的文件，進(jìn)入到vue-devtools目錄，安裝項(xiàng)目所需要的依賴包。
安裝方法：npm install ?或者 ?cnpm install （注：cnpm命令是國內(nèi)的鏡像，速度會(huì)快一些）?
第三步：
? ?編譯項(xiàng)目文件。
編譯方法：npm run build
第四步：
修改安裝目錄vue-devtools\shells\chrome 中 的manifest.json文件。 persistent參數(shù)改為true，訪問協(xié)議是否包含：1.http://*/*; 2.https://*/*; 3.file:///*;這三種情況
第五步：
? ? ? ? ? ?添加至瀏覽器：
添加方法：在chrome瀏覽器輸入地址：“chrome://extensions/”進(jìn)入擴(kuò)展程序頁面，然后點(diǎn)擊“加載已解壓的擴(kuò)展程序...”按鈕；選擇vue-devtools>shells目錄下的Chrome文件夾；還需允許文件地址是否訪問。如果看不到“加載已解壓的擴(kuò)展程序...”按鈕，先勾選“開發(fā)者模式”。如
第六步：
使用：
? ? 打開我們的vue應(yīng)用，打開調(diào)試，點(diǎn)擊vue擴(kuò)展圖標(biāo)，就可以使用了。如下圖：
注：如果點(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.
推薦閱讀：vue cli 3.0快速創(chuàng)建項(xiàng)目vue如何導(dǎo)入外部js文件（es6）
