先導

vue-devtools是一款基於chrome瀏覽器的外掛，用於vue應用的除錯，這款vue除錯神器可以極大地提高我們的除錯效率。幫助我們快速的除錯開發vue應用。

第一步：

  我們可以先從github上找到vue-devtools的專案，下載到本地。下載vue-devtools連結。

克隆方法：git clone https://github.com/vuejs/vue-devtools.git

第二步：

  解壓下載好的檔案，進入到vue-devtools目錄，安裝專案所需要的依賴包。

安裝方法：npm install  或者  cnpm install （注：cnpm命令是國內的映象，速度會快一些）

第三步：

   編譯專案檔案。

編譯方法：npm run build

第四步：

修改安裝目錄vue-devtools\shells\chrome 中 的manifest.json檔案。 persistent引數改為true，訪問協議是否包含：1.http://*/*; 2.https://*/*; 3.file:///*;這三種情況

第五步：

           新增至瀏覽器：

新增方法：在chrome瀏覽器輸入地址：“chrome://extensions/”進入擴充套件程式頁面，然後點選“載入已解壓的擴充套件程式...”按鈕；選擇vue-devtools>shells目錄下的Chrome資料夾；還需允許檔案地址是否訪問。如果看不到“載入已解壓的擴充套件程式...”按鈕，先勾選“開發者模式”。如下圖:

第六步：

使用：

    開啟我們的vue應用，開啟除錯，點選vue擴充套件圖示，就可以使用了。如下圖：

注：如果點選vue擴充套件圖示還是提示：