Vue DevTools調(diào)試工具的使用
因?yàn)楣ぷ饕?，目前主要在用Vue.js技術(shù)棧做開(kāi)發(fā)，調(diào)試是必不可少的，這里會(huì)用的Vue DevTools的調(diào)試工具，問(wèn)題就出在這里，當(dāng)用Vue DevTools做調(diào)試時(shí)，很多時(shí)候都不能用，提示沒(méi)有監(jiān)測(cè)到Vue，這讓工作效率瞬間拉低了。
安裝:
1.到github下載：
git clone https://github.com/vuejs/vue-devtools
2.在vue-devtools目錄下安裝依賴(lài)包
cd vue-devtools cnpm install
修正Vue DevTools
好了，開(kāi)始正題，下面來(lái)說(shuō)一下修正的方法。
先從官網(wǎng)把Vue DevTools下載下來(lái)（https: //github.com/vuejs/vue-devtools）。
關(guān)鍵步驟一.修改persistent
找到文件vue-devtools/shells/chrome/manifest.json，修改persistent為true。
保存后，編譯一下：
關(guān)鍵步驟二.勾選允許訪(fǎng)問(wèn)文件網(wǎng)址
上一步已經(jīng)把Vue DevTools寫(xiě)好了，接下來(lái)是安裝這個(gè)擴(kuò)展。
打開(kāi)Chrome，在地址欄輸入chrome://extensions/，直接進(jìn)入Chrome的擴(kuò)展。
勾選最上方的開(kāi)發(fā)者模式，再點(diǎn)擊“加載已解壓的擴(kuò)展程序…”，路徑為：vue-devtools-master/shells/chrome
勾選允許訪(fǎng)問(wèn)文件網(wǎng)址
關(guān)鍵步驟三.加入Vue文件中加入Vue.config.devtools
Vue.config.devtools = true; //這步很重要
new Vue({
el: '#app',
data: {
a: 123,
}
});
搞定！
效果
下載已修正版的Vue DevTools下載：vueDevTools(可監(jiān)測(cè)修正版).zip
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Vue3封裝登錄功能的兩種實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要給大家介紹了關(guān)于Vue3更高效的構(gòu)建工具Vite使用的相關(guān)資料,Vite是一種面向現(xiàn)代瀏覽器的一個(gè)更輕、更快的前端構(gòu)建工具,能夠顯著提升前端的開(kāi)發(fā)體驗(yàn),需要的朋友可以參考下2023-10-10
vue在使用element組件出現(xiàn)<el-input>標(biāo)簽無(wú)法輸入的問(wèn)題
這篇文章主要介紹了vue在使用element組件出現(xiàn)<el-input>標(biāo)簽無(wú)法輸入的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue中實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)方法
下面小編就為大家分享一篇vue中實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue 中 beforeRouteEnter 死循環(huán)的問(wèn)題
這篇文章主要介紹了vue beforeRouteEnter 死循環(huán)的問(wèn)題,在文章末尾給大家補(bǔ)充介紹了vue中beforeRouteEnter使用的誤區(qū)，需要的朋友可以參考下2019-04-04
vue在取對(duì)象長(zhǎng)度length時(shí)候出現(xiàn)undefined的解決
這篇文章主要介紹了vue在取對(duì)象長(zhǎng)度length時(shí)候出現(xiàn)undefined的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue項(xiàng)目中實(shí)現(xiàn)ElementUI按需引入過(guò)程解析
這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)ElementUI按需引入,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
大家應(yīng)該都知道vue是單向數(shù)據(jù)流，一般我們也不會(huì)在子組件里面修改父組件傳進(jìn)來(lái)的值，但總有需要修改的時(shí)候，這篇文章主要介紹了vue中修改props傳進(jìn)來(lái)的值,需要的朋友可以參考下2022-12-12
iview實(shí)現(xiàn)select tree樹(shù)形下拉框的示例代碼
這篇文章主要介紹了iview實(shí)現(xiàn)select tree樹(shù)形下拉框的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
Vue實(shí)現(xiàn)雙token無(wú)感刷新的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)雙token無(wú)感刷新,雙token機(jī)制,尤其是指在OAuth 2.0授權(quán)協(xié)議中廣泛使用的access token（訪(fǎng)問(wèn)令牌）和refresh token（刷新令牌）組合,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03