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 文件下，調試工具無效。