vue devtools的安裝與使用教程
Vue調(diào)試工具vue-devtools的安裝與使用
一.在github上下載壓縮包，github下載地址：https://github.com/vuejs/vue-devtools
二.解壓到本地的某盤
三.用你的npm中進(jìn)入該文件夾下
四.依次輸:
1:npm install
2:npm run build (這一步一定不要忘了，沒(méi)有執(zhí)行這一步的話，項(xiàng)目文件夾shells>chrome文件夾里會(huì)少一個(gè)src文件夾,如下圖)
五：修改shells>chrome文件夾下的mainifest.json 中的persistant為true
六：我們找到谷歌瀏覽器的擴(kuò)展程序功能，勾選開(kāi)發(fā)者模式，然后我們將插件文件夾里的shells>chorme文件夾直接拖到頁(yè)面中，完成安裝。
（注意：如果我們沒(méi)有執(zhí)行第四部的npm run build，在這里會(huì)報(bào)錯(cuò)：無(wú)法加載背景腳本"build/background.js"）
七：在插件的目錄下執(zhí)行npm run dev，這個(gè)時(shí)候我們的插件就可以運(yùn)行了,打開(kāi)localhost:8080可以看到插件已經(jīng)安裝并運(yùn)行了。
八：我們?cè)诖蜷_(kāi)本地的其他項(xiàng)目時(shí)，就不需要在vue-devtools文件夾下執(zhí)行npm run dev了，因?yàn)檫@個(gè)插件已經(jīng)安裝在瀏覽器中。接下來(lái)就愉快的調(diào)試你的vue項(xiàng)目吧。
總結(jié)
以上所述是小編給大家介紹的vue devtools的安裝與使用教程，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue的.sync語(yǔ)法糖是一個(gè)用于雙向數(shù)據(jù)綁定的指令,可以在子組件中用來(lái)監(jiān)聽(tīng)父組件傳遞下來(lái)的props的變化,本文給大家介紹了在Vue中,.sync語(yǔ)法糖的使用方法,感興趣的朋友跟著小編一起來(lái)學(xué)習(xí)吧2024-01-01
vue前端導(dǎo)出多級(jí)表頭的excel表的示例代碼
本文主要介紹了vue前端導(dǎo)出多級(jí)表頭的excel表的示例代碼,可以使用xlsx庫(kù)來(lái)創(chuàng)建Excel文件,下面就來(lái)具體介紹一下,感興趣的可以了解一下2024-06-06
vue如何解決空格和空行報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了vue如何解決空格和空行報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue element-ui el-tooltip組件失效問(wèn)題及解決
這篇文章主要介紹了vue element-ui el-tooltip組件失效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
解決v-for中使用v-if或者v-bind:class失效的問(wèn)題
今天小編就為大家分享一篇解決v-for中使用v-if或者v-bind:class失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vuex是一個(gè)專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一篇文章帶你吃透Vuex3的狀態(tài)管理,需要的朋友可以參考下2022-07-07
vue封裝一個(gè)簡(jiǎn)單的div框選時(shí)間的組件的方法
這篇文章主要介紹了vue封裝一個(gè)簡(jiǎn)單的div框選時(shí)間的組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
Nuxt.js SSR與權(quán)限驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了Nuxt.js SSR與權(quán)限驗(yàn)證的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
Vue代理請(qǐng)求數(shù)據(jù)出現(xiàn)404問(wèn)題及解決
這篇文章主要介紹了Vue代理請(qǐng)求數(shù)據(jù)出現(xiàn)404的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue中typescript裝飾器的使用方法超實(shí)用教程
這篇文章主要介紹了vue中使用typescript裝飾器的使用方法超實(shí)用教程,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06