Vue調試神器vue-devtools安裝

這是一個建立於 的文章，其中的資訊可能已經有所發展或是發生改變。

前言

vue-devtools是一款基於chrome遊覽器的外掛程式，用於調試vue應用，這可以極大地提高我們的調試效率。接下來我們就介紹一下vue-devtools的安裝。

chrome商店直接安裝

vue-devtools可以從chrome商店直接下載安裝，非常簡單，這裡就不過多介紹了。不過要注意的一點就是，需要翻牆才能下載。

手動安裝

第一步：找到vue-devtools的github項目，並將其clone到本地. vue-devtools

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

第二步：安裝項目所需要的npm包

npm install   //如果太慢的話，可以安裝一個cnpm, 然後命令換成 cnpm install

第三步：編譯專案檔

npm run build

第四步：添加至chrome遊覽器

遊覽器輸入地址“chrome://extensions/”進入擴充程式頁面，點擊“載入已解壓的擴充程式...”按鈕，選擇vue-devtools>shells下的chrome檔案夾。/***如果看不見“載入已解壓的擴充程式...”按鈕，則需要勾選“開發人員模式”。*/

到此添加完成，如下：

結語：vue-devtools如何使用

當我們添加完vue-devtools擴充程式之後，我們在調試vue應用的時候，chrome開發人員工具中會看一個vue的一欄，點擊之後就可以看見當前頁面vue對象的一些資訊。vue-devtools使用起來還是比較簡單的，上手非常的容易，這裡就細講其使用說明了。