mac-chrome下手動安裝vue-devtools

 

原文鏈接： https://blog.csdn.net/weixin_44868003/article/details/89457089

廢話就不多說，直接上安裝步驟，一步一步來 => success

1.下載安裝vue-devtools源文件

mkdir vuetools
cd vuetools


git clone https://github.com/vuejs/vue-devtools.git
cd vue-devtools
npm install --registry=https://registry.npm.taobao.org
npm run build

 

 

2.修改manifest.json文件

cd vue-devtools
cd shells
cd chrome
vi manifest.json
// 修改persistent為true

 

3.將vue-devtools文件夾復制到Chrome插件文件夾中

// 大致在這個路徑下：
~/Library/Application Support/Google/Chrome/Default
 
// vue-devtools文件夾復制到Default下
 
// mac上找路徑犯難了，可以隨便打開一個文件  頂部 前往>前往文件夾>路徑

 

4.將vue-devtools文件夾添加到瀏覽器擴展

// 在Chrome地址欄輸入  chrome://extensions/
// 進入擴展程序頁面，將文件夾拖入瀏覽器即可。
// 至此安裝完成。安裝成功后瀏覽器右上角會出現vue的圖標，表示安裝成功。
 
// 現在可以體驗一下vue這個調試工具了。

 

 

后話：

對於安裝Vue Devtools插件成功后使用提示Vue.js not detected，有可能是你引入了壓縮版的vue.min.js，必須要引入vue.js才行喔。

其實早就了解過這個工具，之前在windows上安裝過，沒成功。所以一直也沒有體驗過。也是剛剛安裝完成，方法當然也是參考了很多大神的思路，以上方法親測可行，就說這么多吧，有問題一起交流。

mac-chrome下手動安裝vue-devtools