Vue DevTools調(diào)試工具的使用
因為工作要求,目前主要在用Vue.js技術(shù)棧做開發(fā),調(diào)試是必不可少的,這里會用的Vue DevTools的調(diào)試工具,問題就出在這里,當(dāng)用Vue DevTools做調(diào)試時,很多時候都不能用,提示沒有監(jiān)測到Vue,這讓工作效率瞬間拉低了。
安裝:
1.到github下載:
git clone https://github.com/vuejs/vue-devtools
2.在vue-devtools目錄下安裝依賴包
cd vue-devtools cnpm install
修正Vue DevTools
好了,開始正題,下面來說一下修正的方法。
先從官網(wǎng)把Vue DevTools下載下來(https: //github.com/vuejs/vue-devtools)。
關(guān)鍵步驟一.修改persistent
找到文件vue-devtools/shells/chrome/manifest.json
,修改persistent
為true
。
保存后,編譯一下:
關(guān)鍵步驟二.勾選允許訪問文件網(wǎng)址
上一步已經(jīng)把Vue DevTools寫好了,接下來是安裝這個擴(kuò)展。
打開Chrome,在地址欄輸入chrome://extensions/
,直接進(jìn)入Chrome的擴(kuò)展。
勾選最上方的開發(fā)者模式
,再點擊“加載已解壓的擴(kuò)展程序…”,路徑為:vue-devtools-master/shells/chrome
勾選允許訪問文件網(wǎng)址
關(guān)鍵步驟三.加入Vue文件中加入
Vue.config.devtools
Vue.config.devtools = true; //這步很重要 new Vue({ el: '#app', data: { a: 123, } });
搞定!
效果
下載已修正版的Vue DevTools下載:vueDevTools(可監(jiān)測修正版).zip
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue在使用element組件出現(xiàn)<el-input>標(biāo)簽無法輸入的問題
這篇文章主要介紹了vue在使用element組件出現(xiàn)<el-input>標(biāo)簽無法輸入的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04vue 中 beforeRouteEnter 死循環(huán)的問題
這篇文章主要介紹了vue beforeRouteEnter 死循環(huán)的問題,在文章末尾給大家補充介紹了vue中beforeRouteEnter使用的誤區(qū),需要的朋友可以參考下2019-04-04vue在取對象長度length時候出現(xiàn)undefined的解決
這篇文章主要介紹了vue在取對象長度length時候出現(xiàn)undefined的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06Vue項目中實現(xiàn)ElementUI按需引入過程解析
這篇文章主要介紹了Vue項目中實現(xiàn)ElementUI按需引入,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05iview實現(xiàn)select tree樹形下拉框的示例代碼
這篇文章主要介紹了iview實現(xiàn)select tree樹形下拉框的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12