詳解vue.js的devtools安裝

發(fā)布時(shí)間：2020-09-18 10:36:55 來(lái)源：腳本之家閱讀：160 作者：lolDragon 欄目：web開(kāi)發(fā)

安裝

1.github下載地址：https://github.com/vuejs/vue-devtools

2.下載好后進(jìn)入vue-devtools-master工程執(zhí)行npm install ----->npm run build.

3.修改manifest.json 中的persistent為true

詳解vue.js的devtools安裝

4.打開(kāi)谷歌瀏覽器設(shè)置--->擴(kuò)展程序--》勾選開(kāi)發(fā)者模式---》添加工程中的shells-->chrome的內(nèi)容或者直接拖動(dòng)shells-->chrome，至此恭喜已經(jīng)安裝成功?。?！

詳解vue.js的devtools安裝

5.打開(kāi)自己的vue項(xiàng)目中，如果是有vue-cli構(gòu)建的項(xiàng)目，執(zhí)行npm run dev,打開(kāi)http://localhost:8080/ 服務(wù)器調(diào)試地址；至此完成devtools的安裝；

使用

打開(kāi)vue項(xiàng)目,在控制臺(tái)選擇vue：

詳解vue.js的devtools安裝

5.可操作組件查看信息變化(例如分頁(yè)組件)選擇第一頁(yè)：

詳解vue.js的devtools安裝

選擇最后一頁(yè)：

詳解vue.js的devtools安裝

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡