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