截圖如下：

可以檢視元件資訊，以及data的資料，vuex的state值的變化，方便除錯程式，快速找到錯誤，外掛使用效果圖如下：

一、安裝方式

可以去谷歌商店下載

也可以去http://www.cnplugins.com/網站下載安裝

快速下載：上傳至百度網盤

連結：https://pan.baidu.com/s/1F6FoKdGFRSw_V6jSH5QStw
提取碼：fplg

二、下載解壓完成

進入檔案

npm install

然後修改vue-devtools\shells\chrome\manifest.json檔案，修改31行persistent為true

npm run build

完成之後點選Chrome瀏覽器設定——擴充套件程式，或者直接輸入chrome://extensions/進入擴充套件程式管理介面，點選開發者模式，載入以解壓的的擴充套件程式，匯入資料夾

vue-devtools\shells\chrome，就可以看到下圖

點選詳情進行設定

關閉瀏覽器，開啟vue的專案，會出現Vue的除錯介面

如果下面這種情況控制檯未出現，在專案檔案main.js新增

Vue.config.devtools = true

新增完成重新啟動你的vue專案，在瀏覽器開啟