編寫時間: 2018.7.4

Mac版本 10.13.3
Chrome 版本 67.0.3396.99
Node.js 版本 v10.4.1 (之前是 v6.11.2)
npm 版本 v3.10.10

根據網絡文章 和 自己的操作整理.
具體查閱了哪些文章已無法一一說明, 在這里表示歉意和感謝.

手動安裝方式

直接安裝 Chrome 的 vue-devtools 插件無法啟用. 所以才使用手動安裝的方式.

第一步: 找到vue-devtools的github項目，并將其下載到本地

vue-devtools的github項目地址

第二步: 將下載的項目文件放入 Chrome瀏覽器的插件文件夾中.

• 查看默認的 Chrome瀏覽器的插件文件夾
  1. 地址欄輸入chrome:version 回車
  2. 用資源管理器打開個人資料路徑欄的路徑,該路徑下的Extensions文件夾即默認的擴展安裝路徑

第三步: 進入目錄, 安裝所需npm依賴包，編譯文件

如果npm下載太慢, 就換成cnpm 淘寶的鏡像, cnpm install

第四步: 打開Chrome 擴展程序頁面, 開啟 開發(fā)者模式

地址欄中輸入 chrome://extensions/, 打開擴展程序頁面.

頁面右上角 開啟開發(fā)者模式

第五步: 加載已解壓的擴展程序

方法1: 將 vue-devtools-master/shells/chrome文件夾 拖入 Chrome 擴展程序頁面 即可

方法2: 點擊 頁面上方的 加載已解壓的擴展程序, 選擇vue-devtools-master/shells/chrome文件夾 即可

第六步: 測試安裝是否成功

使用 Chrome 瀏覽器打開一個引用了 Vue.js 的 頁面, 再開啟控制臺, 就能看到 vue-devtools已經啟用了.

注意: 沒有引用 vue 的頁面是不會啟用的.