vue-devtools : vue的調試工具及log顯示工具 vconsole

使用 devtools 有很多好處，比如它可以讓你能夠實時編輯數據屬性並立即看到其反映出來的變化。另一個主要的好處是能夠為 Vuex 提供時間旅行式的調試體驗。

注意：請留意如果頁面使用了一個生產環境/壓縮后的 Vue.js 構建版本 (例如來自一個 CDN 的標准的鏈接)，devtools 的審查功能是默認被禁用的，所以 Vue 面板不會出現。如果你切換到一個非壓縮版本，你可能需要強制刷新該頁面來看到它。

 

vue-devtools安裝:

chrome商店直接安裝:  vue-devtools可以從chrome商店直接下載安裝，非常簡單，這里就不過多介紹了。不過要注意的一點就是，需要翻牆才能下載。

源代碼安裝： 

1、     git clone https://github.com/vuejs/vue-devtools.git
然后進入目錄：

2、  npm install  //如果太慢的話，可以安裝一個cnpm, 然后命令換成 cnpm install
3、 修改manifest.json文件： 把"persistent":false改成true

4、  npm run build

5、  游覽器輸入地址“chrome://extensions/”進入擴展程序頁面，點擊“加載已解壓的擴展程序...”按鈕，選擇vue-devtools>shells下的chrome文件夾。

當我們添加完vue-devtools擴展程序之后，我們在調試vue應用的時候，chrome開發者工具中會看一個vue的一欄，點擊之后就可以看見當前頁面vue對象的一些信息。vue-devtools使用起來還是比較簡單的，上手非常的容易。即運行vue項目時, 打開f12, 選擇vue就可以使用了.

 

 

js顯示console.log的時候由於一些復雜的object無法打印，或者打印出來是看不懂的東西，可以使用vconsole，它會托管庫里原來的的console，這樣不改變調用方式的情況下，可以優雅的打印出復雜變量，相當好！重點是移動端調試同樣可以打印。