1之前在windows上裝過,最近剛換了個mac本,重新安裝下,也是為了記錄下我安裝的過程。
github下載vue-devtool到本地
下載地址https://github.com/vuejs/vue-devtools#vue-devtools
注意,下載的時候默認的是在dev分支,要切換到master,然后克隆到本地(可以先放桌面)
2.將下載的項目文件放入 Chrome瀏覽器的插件文件夾
在瀏覽器地址欄輸入chrome://version/
找到路徑之后,可以在頂部工具欄”前往“中直接輸入文件地址
3.在default文件夾下新建Extensions文件夾(已經存在就不用新建了),並且將下載的vue-devtool-master文件夾復制進去,cd進入該文件夾cd vue-devtools-master
4. 安裝依賴
npm install
npm run build(沒有這一步會報錯哦~)
5.在地址欄輸入chrome://extensions,打開右側開發者模式
將vue-devtools-master/shells/chrome文件夾拖入擴展程序頁面即可
如果以上步驟完成之后,在控制台還是不顯示Vue的tab,以上vue圖標不亮,點擊圖標出現vue.js not detected的提示還需要進行以下步驟
找到安裝目錄
修改mainifest.json文件中的persistent:false,修改成persistent:true。一般這個時候就可以正常使用了
如果還是不行,修改webpack.config.js的代碼
修改成development,(可能正式版本發布的時候,需要修改回來,待驗證)
再運行vue項目 就可以正常調試了