vue-devtools的安裝

vue-devtools是基于google chrome浏覽器的一款調試vue.js應用的開發者浏覽器擴充，可以在浏覽器開發者工具下調試代碼。前端開發工程師應該比較熟悉這款工具，可以邊看側邊欄窗格中的頁面，邊檢查代碼。由于vue是資料驅動的，是以就會存在在開發調試中檢視DOM結構并不能看到我們想看到的内容，那麼借助vue-devtools插件，我們就可以很容易的對資料結構進行解析和調試。

本文重點介紹vue-devtools安裝方法，提供chrome插件直接安裝方法。接下來我們就介紹一下vue-devtools的安裝。

1.下載下傳好vue-devtools壓縮包(crx類型的壓縮包)，直接解壓到本地目錄中。如下圖：

2.打開Chrome浏覽器，選擇“自定義及控制”單擊，在下拉菜單中選擇“更多工具”->“擴充程式”，如下圖：

3.将右上角的開發者模式打開，如下圖：

4.點選''加載已解壓的擴充程式''按鈕，選擇第一步中儲存vue-devtools的目錄,點選''選擇檔案夾''按鈕即可。自動回到浏覽器後出現如下圖所示：

5.在Chrome浏覽器中通路vue項目，并打開調試模式（F12），可以看到Vue頁籤，如下圖：