在Vue中有關DevTools調試工具的使用方法

這篇文章主要介紹了Vue DevTools調試工具的使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

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

安裝:

1.到github下載：

git clone https://github.com/vuejs/vue-devtools

2.在vue-devtools目錄下安裝依賴套件

cd vue-devtools

cnpm install

修正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

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在vue中如何實作axios二次封裝

在微信小程式中如何使用audio元件

在微信小程式中如何使用video元件播放影片

#在微信小程式中如何實作下載進度條

在javaScript中如何使用手機號碼校驗工具類別PhoneUtils

以上是在Vue中有關DevTools調試工具的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！