vue-devtools下載與使用

使用vue-cli的同學肯定知道有一個Chrome除錯工具——vue-devtool。但是在國內環境很難直接在Chrome商店下載得到，今天提供一個4.1.5版本的下載地址。連結： 網盤地址 提取碼：ty1m 如果地址過期了，可以到csdn下載：csdn地址

1.安裝

我們開啟chrome的擴充套件程式，講剛下載的檔案拖進去，就可以安裝了。

2.更改一些配置

首先開啟chrome的開發者模式，然後允許vue-devtool在隱身模式使用，和允許訪問網址。

改好之後，還需要修改外掛的一個配置，找到外掛的安裝目錄，在chrome瀏覽器輸入：chrome:version

開啟安裝目錄：

注意，外掛所在的那段長的資料夾名稱可以在開啟開發模式之後找得到。

終於找到安裝目錄之後，我們可以看到有個manifest.json檔案。開啟我們修改幾個地方。

最後一步，我們把應用的vue.min.js改為vue.js就可以使用了。 最後看一下外掛的位置。

3使用

使用vue-devtool可以檢視vue元件裡面的data裡面的變數，methods裡面的函式，和一些全域性物件比如說:$refs,$route，可以檢視vuex裡面的變數及變化監聽。

可以看到，我們通過搜尋priceProcess元件名稱，找到了該元件，點選元件之後，看到了data，computed裡面的變數，並且得到了一個$vm0的vue物件，圖中我們也看到了vuex和event。我們試著檢視和改變一些變數。

可以看到，我們通過$vm0全域性變數，成功操作了該元件定義的loading變數。通過該工具，可以很方便的除錯我們的vue程式。 最後可以關注我的個人公眾號，實時檢視更多更好的文章: