Vue調(diào)試神器vue-devtools安裝方法
什么是vue-devtools?
vue-devtools是一款基于chrome游覽器的插件,用于調(diào)試vue應(yīng)用,這可以極大地提高我們的調(diào)試效率。接下來我們就介紹一下vue-devtools的安裝。
安裝方式
1.chrome商店直接安裝:
vue-devtools可以從chrome商店直接下載安裝,非常簡單,這里就不過多介紹了。不過要注意的一點(diǎn)就是,需要翻墻才能下載。
2.手動安裝:
第一步:找到vue-devtools的github項(xiàng)目,并將其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
第二步:安裝項(xiàng)目所需要的npm包
npm install //如果太慢的話,可以安裝一個(gè)cnpm, 然后命令換成 cnpm install
第三步:編譯項(xiàng)目文件
npm run build
第四步:添加至chrome游覽器
游覽器輸入地址“chrome://extensions/”進(jìn)入擴(kuò)展程序頁面,點(diǎn)擊“加載已解壓的擴(kuò)展程序…”按鈕,選擇vue-devtools>shells下的chrome文件夾。
/**
*如果看不見“加載已解壓的擴(kuò)展程序…”按鈕,則需要勾選“開發(fā)者模式”。
*/
到此添加完成,效果圖如下:
結(jié)語:vue-devtools如何使用
當(dāng)我們添加完vue-devtools擴(kuò)展程序之后,我們在調(diào)試vue應(yīng)用的時(shí)候,chrome開發(fā)者工具中會看一個(gè)vue的一欄,點(diǎn)擊之后就可以看見當(dāng)前頁面vue對象的一些信息。vue-devtools使用起來還是比較簡單的,上手非常的容易,這里就細(xì)講其使用說明了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。好了,接下來可以愉快的調(diào)BUG了~!~
相關(guān)文章
el-form的model、prop屬性和表單校驗(yàn)等使用
本文主要介紹了el-form的model、prop屬性和表單校驗(yàn)等使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08vue中json格式化顯示數(shù)據(jù)(vue-json-viewer)
這篇文章主要給大家介紹了關(guān)于vue中json格式化顯示數(shù)據(jù)(vue-json-viewer)的相關(guān)資料,Vue-json-viewer是一個(gè)Vue組件,用于在Vue應(yīng)用中顯示JSON數(shù)據(jù)的可視化工具,需要的朋友可以參考下2024-05-05詳解vue-cli 本地開發(fā)mock數(shù)據(jù)使用方法
這篇文章主要介紹了詳解vue-cli 本地開發(fā)mock數(shù)據(jù)使用方法,如果后端接口尚未開發(fā)完成,前端開發(fā)一般使用mock數(shù)據(jù)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05vue項(xiàng)目中使用fetch的實(shí)現(xiàn)方法
這篇文章主要介紹了vue項(xiàng)目中使用fetch的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue使用原生js實(shí)現(xiàn)滾動頁面跟蹤導(dǎo)航高亮的示例代碼
這篇文章主要介紹了vue使用原生js實(shí)現(xiàn)滾動頁面跟蹤導(dǎo)航高亮的示例代碼,滾動頁面指定區(qū)域?qū)Ш礁吡痢P【幱X得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10