Vue DevTools調(diào)試工具的使用
因?yàn)楣ぷ饕?，目前主要在用Vue.js技術(shù)棧做開發(fā)，調(diào)試是必不可少的，這里會(huì)用的Vue DevTools的調(diào)試工具，問(wèn)題就出在這里，當(dāng)用Vue DevTools做調(diào)試時(shí)，很多時(shí)候都不能用，提示沒有監(jiān)測(cè)到Vue，這讓工作效率瞬間拉低了。
安裝:
1.到github下載：
git clone https://github.com/vuejs/vue-devtools
2.在vue-devtools目錄下安裝依賴包
cd vue-devtools cnpm install
修正Vue DevTools
好了，開始正題，下面來(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)鍵步驟二.勾選允許訪問(wèn)文件網(wǎng)址
上一步已經(jīng)把Vue DevTools寫好了，接下來(lái)是安裝這個(gè)擴(kuò)展。
打開Chrome，在地址欄輸入chrome://extensions/，直接進(jìn)入Chrome的擴(kuò)展。
勾選最上方的開發(fā)者模式，再點(diǎn)擊“加載已解壓的擴(kuò)展程序…”，路徑為：vue-devtools-master/shells/chrome
勾選允許訪問(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)文章
Vue中l(wèi)ocalStorage那些你不知道的知識(shí)分享
在Vue.js中，?Vuex是一個(gè)強(qiáng)大的狀態(tài)管理工具，而localStorage則是一種用于存儲(chǔ)和獲取本地?cái)?shù)據(jù)的機(jī)制，雖然這兩個(gè)東西都可以用來(lái)存儲(chǔ)數(shù)據(jù)，但它們之間還是有很大的區(qū)別，本文就來(lái)簡(jiǎn)單說(shuō)說(shuō)吧2023-05-05
vue-cli項(xiàng)目配置多環(huán)境的詳細(xì)操作過(guò)程
vue-cli 默認(rèn)只提供了 dev 和 prod 兩種環(huán)境。這篇文章主要介紹了vue-cli項(xiàng)目配置多環(huán)境的詳細(xì)操作過(guò)程,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue數(shù)據(jù)字典取鍵值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
VUE配置proxy代理的開發(fā)測(cè)試及生產(chǎn)環(huán)境
這篇文章主要為大家介紹了VUE配置proxy代理的開發(fā)環(huán)境、測(cè)試環(huán)境、生產(chǎn)環(huán)境詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了Vue中的Props(不可變狀態(tài)),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
Vue3造輪子之Typescript配置highlight過(guò)程
這篇文章主要介紹了Vue3造輪子之Typescript配置highlight過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue3中使用echarts的簡(jiǎn)單七個(gè)步驟(易懂,附緊急避坑)
近期在做一個(gè)vue3的項(xiàng)目,里面有個(gè)圖表需求,因公司之前使用第三方封裝的圖表缺少文檔,就去看了echars的官網(wǎng)文檔,引入原生echars來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用echarts的簡(jiǎn)單七個(gè)步驟,需要的朋友可以參考下2023-01-01
Nuxt的動(dòng)態(tài)路由和參數(shù)校驗(yàn)操作
這篇文章主要介紹了Nuxt的動(dòng)態(tài)路由和參數(shù)校驗(yàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要為大家介紹了vue插件及修改ip啟動(dòng)端口的解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
Vue如何實(shí)現(xiàn)iframe的上一步、下一步操作
這篇文章主要介紹了Vue如何實(shí)現(xiàn)iframe的上一步、下一步操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06