vue調試工具vue-devtools安裝及使用

vue調試工具vue-devtools安裝及使用

本文主要介紹 vue的調試工具 vue-devtools 的安裝和使用html

工欲善其事, 必先利其器, 快快一塊兒來用vue-devtools來調試開發你的vue項目吧vue

安裝: git

1.到github下載:github

git clone https://github.com/vuejs/vue-devtools

2.在vue-devtools目錄下安裝依賴包chrome

1
2
cd vue-devtools
cnpm install

3.修改manifest.json文件shell

把"persistent":false改爲truenpm

 

 4.編譯代碼json

npm run build

 

5.擴展Chrome插件瀏覽器

Chrome瀏覽器 >  更多程序 > 拓展程序 工具

點擊加載已解壓程序按鈕, 選擇 vue-devtools > shells > chrome 放入, 安裝成功以下圖

 

 6. vue-devtools使用

vue項目, 打開f12, 選擇vue就能夠使用了.

vue是數據驅動的, 這樣就能看到對應數據了, 方便咱們進行調試

 

 怎麼樣, 是否是感受工做效率提升了呢

 

溫情提示: 

1.vue必須引入開發版, 使用min壓縮版是不能使用devtools進行調試的

2.安裝後, 須要關閉瀏覽器, 再從新打開, 才能使用

相關文章
相關標籤/搜索