作者：小土豆biubiubiu
掘金：https://juejin.im/user/58c61b4361ff4b005d9e894d
簡書：https://www.jianshu.com/u/cb1c3884e6d5
微信公眾號：土豆媽的碎碎念（掃碼關注，一起吸貓，一起聽故事，一起學習前端技術）
碼字不易，點贊鼓勵喲~
一.前言
vue-devtools是一款基於瀏覽器的插件，用來調試vue應用。本篇文章將要總結的是如何在chrome中安裝Vue的調試工具vue-devtools。
首先能想到的第一種方法就是直接在chrome應用商店中安裝。然鵝，由於大部分的人還是上不了chrome的，我也是。所以呢，就在網上搜羅一番，發現了其他的方法。
1.在其他網站上直接下載chrome的插件。
2.下載vue-devtools項目，編譯出擴展程序插件后，添加到瀏覽器的擴展程序中。
然后就這兩種方法，分別都來實踐一下。
二.在其他網站上直接下載chrome的插件
1.下載
我找了很多可以下載chrome插件的網站，試了好幾次，最終只有這個網站下載的擴展可以成功安裝：https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd（若鏈接失效可點擊此處進入網站首頁手動搜索）
在該網站下載的擴展文件如下：
2.在chrome中進行安裝
打開chrome的擴展程序（可直接在地址欄輸入：chrome://extensions/）
注意：需要打開開發者模式
接着呢，點擊【加載已解壓的擴展程序】選擇我們剛剛下載的插件，或者直接將插件拖拽到該區域，
成功添加的提示：
添加成功后瀏覽器右上角會有圖標顯示:
3.測試是否安裝成功
我們現在訪問一個vue實現的應用
然后在打開開發中工具，在最上面一欄的最后，有一個vue的選項卡，點擊就能打開調試工具。
安裝成功！！！
4.總結
這種方法呢，有點不好的一點就是得找到可以正常安裝的擴展程序，我也是找下載了好幾個去嘗試，拖到瀏覽器的擴展工具中提示都是無效的擴展。
三.下載vue-devtools項目編譯安裝
關於這個方法呢，若有編譯不成功的或者嫌麻煩的，可以直接去我github上面拿：https://github.com/JEmbrace/my-vue-devtools
1.下載
vue-devtools項目在github上，地址為：https://github.com/vuejs/vue-devtools，記得下載或者克隆的時候切換到主分支。
下載得到的文件：
解壓：
2.安裝依賴包
3.修改manifest.json文件
manifest.json文件的位置：
修改的內容：
4.編譯代碼
使用npm run build編譯代碼
5.在瀏覽器擴展程序中添加
將E:\vue-devtools-master\shells下的chrome目錄添加到瀏覽器的擴展程序中，或者直接將該文件夾拖拽到瀏覽器的擴展程序中。
添加成功：
6.測試是否安裝成功
