前言
vue-devtools是一款基于chrome游覽器的插件熬丧，用于調(diào)試vue應(yīng)用怀挠，這可以極大地提高我們的調(diào)試效率绿淋。接下來我們就介紹一下vue-devtools的安裝尝盼。
chrome商店直接安裝
vue-devtools可以從chrome商店直接下載安裝盾沫，非常簡單，這里就不過多介紹了佩捞。不過要注意的一點(diǎn)就是蕾哟，需要翻墻才能下載。
手動(dòng)安裝
第一步：找到vue-devtools的github項(xiàng)目帘营，并將其clone到本地.vue-devtools
gitclonehttps://github.com/vuejs/vue-devtools.git
第二步：安裝項(xiàng)目所需要的npm包
npm install//如果太慢的話逐哈，可以安裝一個(gè)cnpm, 然后命令換成 cnpm install
第三步：編譯項(xiàng)目文件
npm run build
第四步：添加至chrome游覽器
游覽器輸入地址“chrome://extensions/”進(jìn)入擴(kuò)展程序頁面，點(diǎn)擊“加載已解壓的擴(kuò)展程序...”按鈕薯鼠，選擇vue-devtools>shells下的chrome文件夾械蹋。/**
*如果看不見“加載已解壓的擴(kuò)展程序...”按鈕哗戈，則需要勾選“開發(fā)者模式”荷科。
我這里把編譯過的文件上傳了百度云，后續(xù)步驟依舊胆胰，并且還附上了一個(gè).crx文件刻获，在chrome拓展程序頁面上把文件拖進(jìn)去即可安裝。若百度云失效可文章下留言厚柳，我看到后會(huì)重新生成鏈接。
鏈接:https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg密碼:1hsv
vue-devtools如何使用
當(dāng)我們添加完vue-devtools擴(kuò)展程序之后便监，我們?cè)谡{(diào)試vue應(yīng)用的時(shí)候烧董，chrome開發(fā)者工具中會(huì)看一個(gè)vue的一欄胧奔，點(diǎn)擊之后就可以看見當(dāng)前頁面vue對(duì)象的一些信息。vue-devtools使用起來還是比較簡單的螟左，上手非常的容易觅够，這里就細(xì)講其使用說明了。
非常好用的調(diào)試工具钳吟，有了它我們就可以更好的學(xué)習(xí)Vue了：烨摇５渔ⅰ！
作者：foreknow
鏈接：http://www.reibang.com/p/63f09651724c
來源：簡書
著作權(quán)歸作者所有壁酬。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)恨课，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
