2018-12-12 Vue的除錯工具vue-devtools的安裝
原文地址 ： ofollow,noindex">https://blog.csdn.net/lzy_1112/article/details/78960744
vue-devtools是一款基於chrome瀏覽器的外掛，用於vue應用的除錯，這款vue除錯神器可以極大地提高我們的除錯效率。幫助我們快速的除錯開發vue應用。
1.從github上找到vue-devtools-master 一定要是master 我踩了這個坑...
2.解壓下載好的檔案， 進入到vue-devtools目錄 ，安裝專案所需要的依賴包。
安裝方法：npm install 或者 cnpm install （注：cnpm命令是國內的映象，速度會快一些）
(安裝方法的前提是：要先裝node.js https://blog.csdn.net/u010255310/article/details/52205132 )
npm install
3.編譯專案檔案。
編譯方法：npm run build
npm run build
4.修改安裝目錄vue-devtools-master\shells\chrome 中 的manifest.json檔案。
persistent引數改為true，
訪問協議是否包含：1.http:// / ; 2.https:// / ; 3.file:///*;
image.png
5.新增至瀏覽器：
新增方法：在chrome瀏覽器輸入地址：“chrome://extensions/”進入擴充套件程式頁面，然後點選“載入已解壓的擴充套件程式...”按鈕；選擇vue-devtools-master>shells目錄下的Chrome資料夾；還需允許檔案地址是否訪問。如果看不到“載入已解壓的擴充套件程式...”按鈕，先勾選“開發者模式”。
新增方法
6.使用：
開啟我們的vue應用，開啟除錯，點選vue擴充套件圖示，就可以使用了。如下圖：
vue
注：如果點選vue擴充套件圖示還是提示：
Vue.jsis detectedonthis page. Open DevToolsand lookfor the Vue panel.
可以檢查下你是否使用的是壓縮版本的vue.min.js，使用vue.min.js預設為生產環境的，需要改為vue.js.