Vue瀏覽器調試工具VueTools安裝以及使用

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

 

vue-devtools如何使用

當我們添加完vue-devtools擴展程序之后，我們在調試vue應用的時候，chrome開發者工具中會看一個vue的一欄，點擊之后就可以看見當前頁面vue對象的一些信息。vue-devtools使用起來還是比較簡單的，上手非常的容易，這里就細講其使用說明了。

注意：如果使用的在線引用vue.js，不能引用vue.min.js版本，需要使用vue.js版

 

 

 

 

安裝方法一：

瀏覽器添加插件

1.將提前下載好的組件插件減壓

2.瀏覽器地址欄輸入chrome://extensions轉到擴展程序，啟用“開發者模式”，點擊“加載已解壓的擴展程序”按鈕，選擇目錄\vue-devtools-5.1.1\shells\下的chrome文件夾，插件添加成功！

 注意：需要壓縮文件的聯系我喲！

 

鏈接：https://pan.baidu.com/s/1vw4wX1IxgbiiOdvN4b-Wcw

      

 

 

 

 

安裝方法二：

這里以 chrome 瀏覽器為例：

1、打開 chrome 網上應用店，搜索 vue.js

注：如果打不開頁面需要 代理

 

 

 選擇第一個，點擊 添加至chrome

 

 

 點擊添加擴展程序

 

 

 安裝完成

 

注意：

如果提示：

Vue.js Devtools inspection is not available because it's in production mode or explicitly disabled

main.js中在引入vue后加 

Vue.config.devtools = true;



注意：
啟動項目后，如果斷點后查看不了變了值，說明啟動模式是production,需要改為development模式，如下圖

 

可以在vue.config.js最上端打印環境：console.log(process.env.NODE_ENV) 驗證一下

解決辦法：

package.json 開發啟動命令前加 set NODE_ENV=development && ，這樣就可以快樂的打斷點看變量值了