編寫時(shí)間: 2018.7.4
Mac版本 10.13.3
Chrome 版本 67.0.3396.99
Node.js 版本 v10.4.1 (之前是 v6.11.2)
npm 版本 v3.10.10
根據(jù)網(wǎng)絡(luò)文章 和 自己的操作整理.
具體查閱了哪些文章已無(wú)法一一說(shuō)明, 在這里表示歉意和感謝.
手動(dòng)安裝方式
直接安裝 Chrome 的 vue-devtools 插件無(wú)法啟用. 所以才使用手動(dòng)安裝的方式.
第一步: 找到vue-devtools的github項(xiàng)目孙乖，并將其下載到本地
vue-devtools的github項(xiàng)目地址
第二步: 將下載的項(xiàng)目文件放入 Chrome瀏覽器的插件文件夾中.
- 查看默認(rèn)的 Chrome瀏覽器的插件文件夾
- 地址欄輸入
chrome:version回車 - 用資源管理器打開(kāi)
個(gè)人資料路徑欄的路徑,該路徑下的Extensions文件夾即默認(rèn)的擴(kuò)展安裝路徑
- 地址欄輸入
第三步: 進(jìn)入目錄, 安裝所需npm依賴包锡搜，編譯文件
如果npm下載太慢, 就換成cnpm 淘寶的鏡像,
cnpm install
第四步: 打開(kāi)Chrome 擴(kuò)展程序頁(yè)面, 開(kāi)啟 開(kāi)發(fā)者模式
地址欄中輸入 chrome://extensions/, 打開(kāi)擴(kuò)展程序頁(yè)面.
頁(yè)面右上角 開(kāi)啟開(kāi)發(fā)者模式
第五步: 加載已解壓的擴(kuò)展程序
方法1: 將 vue-devtools-master/shells/chrome文件夾 拖入 Chrome 擴(kuò)展程序頁(yè)面 即可
方法2: 點(diǎn)擊 頁(yè)面上方的 加載已解壓的擴(kuò)展程序, 選擇vue-devtools-master/shells/chrome文件夾 即可
第六步: 測(cè)試安裝是否成功
使用 Chrome 瀏覽器打開(kāi)一個(gè)引用了 Vue.js 的 頁(yè)面, 再開(kāi)啟控制臺(tái), 就能看到 vue-devtools已經(jīng)啟用了.
注意: 沒(méi)有引用 vue 的頁(yè)面是不會(huì)啟用的.
