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

本文主要介紹 vue的調試工具 vue-devtools 的安裝和使用。
工欲善其事, 必先利其器, 快快一塊兒來用vue-devtools來調試開發你的vue項目吧。

1.到github下載:git clone https://github.com/vuejs/vue-...vue

clipboard.png

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

  • cmd中打開剛剛克隆文件的目錄下:(好比個人:F:codevuevue-devtools-master)

    clipboard.png

  • 在該目錄下安裝:npm install

clipboard.png

3.修改manifest.json文件github

clipboard.png

  • 將代碼中 "persistent":false改爲true

clipboard.png

4.安裝完成後同在該目錄(好比個人:F:codevuevue-devtools-master)下npm run build
clipboard.pngchrome

5.擴展Chrome插件shell

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

clipboard.png

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

clipboard.png

  1. vue-devtools使用

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

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

clipboard.png

相關文章
相關標籤/搜索