本文在參考https://www.jianshu.com/p/18906cade6c4的基礎上，做了更為細緻的介紹。

1. 下載Github原始檔（vue-devtools）

在GitHub中下載原始檔，並解壓到本地（比如桌面）。

https://github.com/vuejs/vue-devtools.git

2.對原始檔進行編譯

2.1切換到vue-devtools資料夾所在目錄，如：

cd Desktop/vue-devtools

2.2安裝所需的npm依賴包

npm install

2.3編譯檔案

npm run build

3.修改manifest.json檔案

3.1 進入到vue-devtools-dev/shells/chrome資料夾下會看到manifest.json檔案，修改persistent為true。

"persistent": true

4.放置編譯配置好的vue-devtools-dev資料夾（建議）

推薦將資料夾放到瀏覽器外掛資料夾中，Mac中chrome外掛預設安裝目錄位置為：

~/Library/Application Support/Google/Chrome/Default/Extensions

可以通過位址列輸入chrome:version 回車，用資源管理器開啟"個人資料路徑"欄的路徑,該路徑下的Extensions資料夾即預設的擴充套件安裝路徑。

放置好vue-devtools-dev資料夾如下：

/Users/@@@/Library/Application Support/Google/Chrome/Default/vue-devtools-dev
 

5.資料夾新增至chrome瀏覽器

輸入地址“chrome://extensions/”進入擴充套件程式頁面，將資料夾拖入瀏覽器即可。
安裝成功後瀏覽器右上角會出現vue的圖示，表示安裝成功。