vue開發(fā)調(diào)試神器vue-devtools使用詳解
前言：
由于vue是數(shù)據(jù)驅(qū)動(dòng)的，所以這就存在在開發(fā)調(diào)試中查看DOM結(jié)構(gòu)并不能解析出什么。
但是借助vue-devtools插件，我們就可以很容易的對(duì)數(shù)據(jù)結(jié)構(gòu)進(jìn)行解析和調(diào)試。
一、下載chrome擴(kuò)展插件
GitHub下載地址：
https://github.com/vuejs/vue-devtools
建議使用npm淘寶鏡像按照依賴包
地址：http://npm.taobao.org/
命令行安裝npm淘寶鏡像：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
之后我們就可以使用cnpm代替npm按照依賴包了，npm安裝依賴包確實(shí)太慢了.....
二、cnpm install
下載完成后打開命令行cmd進(jìn)入vue-devtools文件夾，按照依賴包并npm run build
三、打開shells>chrome>src>manifest.json并把json文件里的"persistent":false改成true
四、擴(kuò)展chrome插件
1.打開chrome瀏覽器，打開設(shè)置>點(diǎn)擊或者程序>點(diǎn)擊開發(fā)者模式
2.再點(diǎn)擊加載已解壓的擴(kuò)展程序，然后把shell>chrome文件夾放入
最后
打開個(gè)vue寫的項(xiàng)目，f12打開調(diào)試工具即可進(jìn)行vue項(xiàng)目的調(diào)試。
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在vue2中v-model使用的還是挺多的,不過(guò)這個(gè)指令一般是用在了輸入框中,并且這個(gè)指令其實(shí)就是個(gè)語(yǔ)法糖,下面這篇文章主要給大家介紹了關(guān)于vue3組件中v-model的使用以及深入講解的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue--點(diǎn)擊當(dāng)前增加class,其他刪除class的方法
今天小編就為大家分享一篇vue--點(diǎn)擊當(dāng)前增加class,其他刪除class的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
詳解vue-admin和后端(flask)分離結(jié)合的例子
本篇文章主要介紹了詳解vue-admin和后端(flask)分離結(jié)合的例子，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue3中reactive函數(shù)toRef函數(shù)ref函數(shù)簡(jiǎn)介
這篇文章主要介紹了Vue3中的三種函數(shù)，分別對(duì)reactive函數(shù)toRef函數(shù)以及ref函數(shù)原理及使用作了簡(jiǎn)單介紹，有需要的朋友可以借鑒參考下2021-09-09
一直對(duì)編譯原理的東西都有一種恐懼感，感覺(jué)太難了，看不懂，打開vue3源碼看到編譯相關(guān)的代碼，直接嚇退。不要擔(dān)心，小編今天帶你一文吃透Vue3編譯原理2023-02-02
vue 實(shí)現(xiàn)剪裁圖片并上傳服務(wù)器功能
這篇文章主要介紹了vue 實(shí)現(xiàn)剪裁圖片并上傳服務(wù)器功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-03-03
Vue3中Provide?/?Inject的實(shí)現(xiàn)原理分享
provide和inject主要為高階插件/組件庫(kù)提供用例,這篇文章主要給大家介紹了關(guān)于Vue3中Provide?/?Inject的實(shí)現(xiàn)原理,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02
Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
詳解vue項(xiàng)目中如何引入全局sass/less變量、function、mixin
這篇文章主要介紹了詳解vue項(xiàng)目中如何引入全局sass/less變量、function、mixin，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vue學(xué)習(xí)筆記之作用域插槽實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之作用域插槽,結(jié)合實(shí)例形式分析了vue.js作用域插槽基本使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02