背景
最近在學習vue，要是想在頁面上調試的話，可以使用vue調試神器devtools。但是因為qiang的原因，無法在谷歌商店中下載安裝使用，所以只能手動安裝。
前言
vue-devtools是一款基於chrome游覽器的插件，用於調試vue應用，這可以極大地提高我們的調試效率
安裝步驟
有兩種方式
可以直接安裝別人編譯處理好的安裝包。
鏈接:https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg 密碼:1hsv
可以下載.crx文件，然后在拓展程序頁面直接把文件拖進去就可以了。也可以下載.zip文件，本地解壓后，使用 加載已解壓擴展程序按鈕導入（.crx文件實測可用，zip文件沒試）
另外也可以自己從github中拉取代碼，然后手動編譯之后安裝
這里有個問題：從github直接拉取代碼然后編譯的時候會報錯
原因參考：https://blog.csdn.net/qq_34115899/article/details/104265647
步驟
-
根據上面博客原因分析，我們不能直接git clone https://github.com/vuejs/vue-devtools.git 因為這個地址默認拉取的是dev分支的代碼會報錯。所以我們可用直接拉取主分支代碼
git clone -b master https://github.com/vuejs/vue-devtools.git
-
拉取成功后進入vue-devtools文件夾檢查當前分支
git branch -a
- 運行sudo cnpm i 下載依賴
如果系統中還沒有安裝cnpm的話，需要使用下面指令安裝cnpm
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝好cnpm后，運行
sudo cnpm i
- 編譯代碼
npm run build
這個時候這個包就是一個可安裝的插件了。
- 安裝包
游覽器輸入地址“chrome://extensions/”進入擴展程序頁面，點擊“加載已解壓的擴展程序...”按鈕，選擇vue-devtools>shells下的chrome文件夾。 /** *如果看不見“加載已解壓的擴展程序...”按鈕，則需要勾選“開發者模式”。 */
然后你打開一個vue編寫的頁面，就可以在瀏覽器調試窗口看到vue選項了
