本文主要介紹 vue的調試工具 vue-devtools 的安裝和使用
chrome商店直接安裝
vue-devtools可以從chrome商店直接下載安裝,非常簡單,這里就不過多介紹了。不過要注意的一點就是,需要翻墻才能下載。
安裝
1.下載依賴包
git clone https://github.com/vuejs/vue-devtools
2.安裝依賴包
- 1). cd vue-devtools
- 2). npm install 或 yarn
3.修改manifest.json文件
把"persistent":false改成true
4.編譯代碼
npm run build 或 yarn build
5.添加到Chrome擴展插件
游覽器輸入地址“chrome://extensions/”進入擴展程序頁面, 打開開發者模式, 點擊加載已解壓擴展程序,選擇vue-devtools>shells下的chrome文件夾。
vue-devtools使用
當我們添加完vue-devtools擴展程序之后,我們在調試vue應用的時候,chrome開發者工具中會看一個vue的一欄,點擊之后就可以看見當前頁面vue對象的一些信息。vue-devtools使用起來還是比較簡單的,上手非常的容易,這里就細講其使用說明了。