1. 通過 Git 克隆項目到本地
git clone https://github.com/vuejs/vue-devtools.git
2. Git 進入到 vue-devtools 所在目錄，然後運行以下兩個指令。
先運行 npm install 安裝項目依賴
再運行 npm run build 進行編譯生成
這兩條指令的運行都需要一定的時間，請耐心等待，build 成功後如下圖：
3. 修改安裝目錄vue-devtools\shells\chrome 中 的manifest.json文件。 將 persistent 參數改為 true，如下圖：
4. 將擴展程序添加到chrome瀏覽器
a. 打開瀏覽器擴展程序（也可以直接在地址欄輸入 chrome://extensions/ 來打開）
b. 打開擴展程序後，開啟 開發者模式，點擊 加載已解壓的擴展程序 按鈕
c. 選擇 vue-devtools > shells 目錄下的 Chrome 文件夾，成功後如下圖：
加載成功後，先啟用，然後點擊旁邊的刷新按鈕，瀏覽器右上角就會出現一個Vue的logo圖標
5. 到此調試工具安裝完成。
需要注意的項： vue調試工具請在開發模式下使用，生產環境中不行。即 vue.min.js 文件下，調試工具無效。
這些技術如何學習，有沒有免費資料？
對前端的技術，架構技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料
知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！！
分享到:
閱讀更多 前端攻城小牛 的文章
