下載

在中國，你是無法使用谷歌應用商店，所以你下載外掛，要使用一些別的手段，一種是下載原始碼編譯，另一種是通過第三方網站。第一種不適合小白，所以現在介紹第二組。

下載外掛網站

國外網站：https://www.crx4chrome.com/

國內網站：http://www.cnplugins.com/

建議使用第一個網址，外掛與應用商店同步更新，開啟網站後，搜尋“Vue.js devtool”。下載後文件如下。

安裝方法

1、在瀏覽器中開啟，更多工具-擴充套件程式

2、在把剛剛下載的檔案拖進開啟的頁面中。

3、安裝後頁面如下。同時勾選“開發者模式”。此時會出現外掛id：nhdogjmejiglipccpnnnanhbledajbpd。注意，建議勾選“允許訪問檔案網址”，這個可以允許外掛對本地檔案進行除錯。如：file:///D:/Vue2.x/BookExample/01.hello.html。

4、使用id搜尋，一般在C盤。選擇並開啟對應的資料夾。

5、（可選配置）開啟資料夾後，修改兩個檔案。開啟檔案manifest.json，把"persistent": false改成"persistent": true；開啟檔案webpack.config.js，把NODE_ENV: '"production"'改成 NODE_ENV: '"development"'。

manifest.json

webpack.config.js

6、點選“F12”，在除錯工作中出現vue工具，如下圖。現在就可以除錯了。

安裝後不能執行的解決方案

問題1：提示Vue.js not detected

解決方法：

（1）你的頁面沒有匯入vue.js檔案，或者不是vue應用。

問題2：提示：Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

解決方法：

（1）檢查自己是否使用壓縮後的js，vue.min.js，使用壓縮後的js檔案，會失去錯誤提示和警告。也可能會導致上面的問題。

（2）嘗試安裝方法中的第5步中的配置。

作者：南昌大魔王
連結：https://www.jianshu.com/p/01a61c8c722f
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。