一、簡(jiǎn)介
vue-devtools是一款基于chrome游覽器的插件，可以用于調(diào)試vue應(yīng)用，也可以用來輔助我們找到各頁(yè)面對(duì)應(yīng)的Vue.js文件路徑，這將極大地提高我們的開發(fā)和調(diào)試效率。
二、下載
下載路徑：https://github.com/vuejs/vue-devtools
將下載好的文件夾放在任意磁盤下
三、安裝方法一
前提：先安裝好node和npm打開cmd，進(jìn)入devtools-main的目錄之下，執(zhí)行命令npm run build 進(jìn)行vue-devtools的安裝
若出現(xiàn)上圖的情況，則更先執(zhí)行命令npm install -g lerna
再次執(zhí)行命令npm run build，發(fā)現(xiàn)又報(bào)錯(cuò)了，有些報(bào)錯(cuò)是因?yàn)閚pm自身的局限性，以及部分模塊沒有安裝。
安裝以下三個(gè)命令：yarn install
1、npm install yarn -g
2、npm install webpack webpack-cli –g
3、npm install -g cnpm --registry=https://registry.npm.taobao.org（cnpm -v可以查看版本）
接著，進(jìn)行cnpm install安裝package.json中的依賴包
cnpm install electron
cnpm install cypress
如過此時(shí)，執(zhí)行npm run build還是錯(cuò)誤，那么考慮換安裝方法二。
三、安裝方法二（推薦）
1、克?。篻it clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git
2、修改mainifest.json 中的persistant為true
3、執(zhí)行命令 npm i
4、執(zhí)行安裝命令 npm run build
終于成功了！
四、配置
chrome中找到 更多工具 / 擴(kuò)展程序 選項(xiàng)
勾選“開發(fā)者模式”
然后點(diǎn)擊 加載已解壓的擴(kuò)展程序，選擇vue-devtools\shells\chrome，確認(rèn)
文章來源：http://www.zghlxwxcb.cn/news/detail-660786.html
五、使用
用谷歌瀏覽器打開vue項(xiàng)目，點(diǎn)擊F12，選擇“vue”，即可使用了。
vue是數(shù)據(jù)驅(qū)動(dòng)的, 這樣就能看到對(duì)應(yīng)數(shù)據(jù)了, 方便我們進(jìn)行調(diào)試
文章來源地址http://www.zghlxwxcb.cn/news/detail-660786.html
到了這里，關(guān)于vue-devtools-簡(jiǎn)介、下載、安裝、配置、使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
