安裝VUE調試工具vue-devtools步驟
一、克隆
由於github上clone太慢,遂將其拉到gitee中。下次使用的時候同步更新下就好。
git clone https://gitee.com/charliebarret/vue-devtools.git
二、安裝
1、安裝npm
網上有很多教程,這裏不再贅述。建議做如下配置。
1、修改node.js默認的npm安裝目錄:
npm config set prefix "D:\toolkit\node_global"
npm config set cache "D:\toolkit\node_cache"
2、將D:\toolkit\node_global加入到系統PATH中
3、更換node.js的國內源
npm config set registry https://registry.npm.taobao.org
npm config get registry
2、安裝vue-devtools
進入到項目根目錄,進行以下步驟操作
1、安裝cypress
切記必須首先安裝cypress,否則極可能會安裝失敗。
cd vue-devtools
npm install cypress --save-dev
安裝完成如圖所示:
2、安裝
npm install
完成如圖:
3、修改manifest.json文件
進入項目根目錄->shells->chrome文件夾下找到manifest.json,查找persistent,修改值爲true
4、run build
npm run build
完成如圖:
3、安裝擴展
完成後在google內核的瀏覽器擴展欄部署插件,這裏的例子是微軟最新的瀏覽器Edge安裝該擴展。
1、打開擴展頁
如圖所示,一定要打開“開發人員模式”和“允許來自其他應用商店的擴展”,然後點擊“加載解壓縮的擴展”,找到本地項目根目錄下->shells->chrome文件夾打開。即安裝成功。
2、安裝成功如圖:
3、安裝好之後該插件會自動檢測網頁是否含有vue元素,如果有則會在F12打開調試面板看得到下圖: