因為工作要求，目前主要在用Vue.js技術棧做開發，調試是必不可少的，這里會用的Vue DevTools的調試工具，問題就出在這里，當用Vue DevTools做調試時，很多時候都不能用，提示沒有監測到Vue，這讓工作效率瞬間拉低了。

---

修正Vue DevTools

好了，開始正題，下面來說一下修正的方法。

先從官網把Vue DevTools下載下來（https: //github.com/vuejs/vue-devtools）。

關鍵步驟一.修改persistent

找到文件vue-devtools/shells/chrome/manifest.json，修改persistent為true。

保存后，編譯一下：

關鍵步驟二.勾選允許訪問文件網址

上一步已經把Vue DevTools寫好了，接下來是安裝這個擴展。

打開Chrome，在地址欄輸入chrome://extensions/，直接進入Chrome的擴展。

勾選最上方的開發者模式，再點擊“加載已解壓的擴展程序…”，路徑為：vue-devtools-master/shells/chrome

勾選允許訪問文件網址

關鍵步驟三.加入Vue文件中加入Vue.config.devtools

Vue.config.devtools = true; //這步很重要 new Vue({el: '#app',data: {a: 123,} });

搞定！

---

效果

---

下載

• 已修正版的Vue DevTools下載：vueDevTools(可監測修正版).zip

---

博客名稱：王樂平博客

CSDN博客地址：http://blog.csdn.net/lecepin

本作品采用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

總結

以上是生活随笔為你收集整理的Vue DevTools可使用修正方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。