1. 程式人生 > >vue調試工具vue-devtools安裝及使用

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

lai ble 分享 拓展 npm syntax clas syn strong

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

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

安裝:

1.到github下載:

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

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

1 2 cd vue-devtools cnpm install

3.修改manifest.json文件

技術分享圖片

把"persistent":false改成true

技術分享圖片

4.編譯代碼

npm run build

5.擴展Chrome插件

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

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

技術分享圖片

6. vue-devtools使用

vue項目, 打開f12, 選擇vue就可以使用了.

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

技術分享圖片

怎麽樣, 是不是感覺工作效率提高了呢

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