通過實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件
1之前在windows上裝過,最近剛換了個(gè)mac本,重新安裝下,也是為了記錄下我安裝的過程。
github下載vue-devtool到本地
下載地址https://github.com/vuejs/vue-devtools#vue-devtools
注意,下載的時(shí)候默認(rèn)的是在dev分支,要切換到master,然后克隆到本地(可以先放桌面)

2.將下載的項(xiàng)目文件放入 Chrome瀏覽器的插件文件夾
在瀏覽器地址欄輸入chrome://version/

找到路徑之后,可以在頂部工具欄”前往“中直接輸入文件地址
3.在default文件夾下新建Extensions文件夾(已經(jīng)存在就不用新建了),并且將下載的vue-devtool-master文件夾復(fù)制進(jìn)去,cd進(jìn)入該文件夾cd vue-devtools-master
4. 安裝依賴
npm install
npm run build(沒有這一步會(huì)報(bào)錯(cuò)哦~)

5.在地址欄輸入chrome://extensions,打開右側(cè)開發(fā)者模式
將vue-devtools-master/shells/chrome文件夾拖入擴(kuò)展程序頁面即可
如果以上步驟完成之后,在控制臺(tái)還是不顯示Vue的tab,以上vue圖標(biāo)不亮,點(diǎn)擊圖標(biāo)出現(xiàn)vue.js not detected的提示還需要進(jìn)行以下步驟
找到安裝目錄

修改mainifest.json文件中的persistent:false,修改成persistent:true。一般這個(gè)時(shí)候就可以正常使用了
如果還是不行,修改webpack.config.js的代碼

修改成development,(可能正式版本發(fā)布的時(shí)候,需要修改回來,待驗(yàn)證)
再運(yùn)行vue項(xiàng)目 就可以正常調(diào)試了



以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue輸入框狀態(tài)切換&自動(dòng)獲取輸入框焦點(diǎn)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue輸入框狀態(tài)切換&自動(dòng)獲取輸入框焦點(diǎn)的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
element表單驗(yàn)證如何清除校驗(yàn)提示語
本文主要介紹了element表單驗(yàn)證如何清除校驗(yàn)提示語,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
el-select自定義指令實(shí)現(xiàn)觸底加載分頁請(qǐng)求options數(shù)據(jù)(完整代碼和接口可直接用)
某些情況下,下拉框需要做觸底加載,發(fā)請(qǐng)求,獲取option的數(shù)據(jù),下面給大家分享el-select自定義指令實(shí)現(xiàn)觸底加載分頁請(qǐng)求options數(shù)據(jù)(附上完整代碼和接口可直接用),感興趣的朋友參考下吧2024-02-02
Vue項(xiàng)目中CSS?Modules和Scoped?CSS的介紹與區(qū)別
在vue中我們有兩種方式可以定義css作用域,一種是scoped,另一種就是css modules,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中CSS?Modules和Scoped?CSS的相關(guān)資料,需要的朋友可以參考下2022-03-03

