Vue.js devtools V5.1.1

下載Vue.js devtools的crx檔案後，開啟Chrome的擴充頁面（chrome：// extensions /或按Chrome選單圖示>更多工具>擴充功能尋找），然後拖曳crx檔案到擴充頁面安裝它；
4、點擊「新增拓展程式」完成安裝。

5、Vue.js devtool插件安裝後無法使用，出現提示“vue.js not detected”，這時我們可以使用下面的方法：

第一，我們要找出Vue.js devtool外掛的安裝目錄。 （如果真找不到插件的安裝位置，可以在本機電腦搜尋插件的ID：nhdogjmejiglipccpnnnanhbledajbpd。）不同作業系統中chrome插件安裝位置不同，例如win8系統中chrome插件的安裝位置：C:\Users\Administrator\ AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd
第二，在找到了Vue.js devtool插件的安裝目錄後，開啟mainifest.json檔案（這是關鍵）。

將mainfest.json中代碼persistent：false，修改成persistent：true。如下圖所示：

一般情況下，修改完如上的位置的程式碼。開啟vue專案後，在控制台選擇vue，就應該可以正常使用了。

第三，如果透過上面的方法調整過後，還是不能夠使用，那麼可以調整一下webpack.config.js的程式碼，如下圖所示：< /p>

最後，重啟一下你的vue專案應該就可以使用了。

二、原始碼安裝方式

1、在github下載devtools原始碼，位址：https:// github.com/vuejs/vue-devtools。

2、下載好後進入vue-devtools-master工程執行cnpm install, 下載依賴，然後執行npm run build，編譯原始程式。

3、編譯完成後，目錄架構如下：

修改為true：

 4、開啟Google瀏覽器的設定--->擴充程序，並勾選開發者模式

然後將剛剛編譯後的工程中的shells目錄下，chrome的整個資料夾直接拖曳到目前瀏覽器中，並選擇啟用，即可將插件安裝到瀏覽器。
 

最後，重啟了你應該可以使用的項目。