vue開發(fā)調(diào)試神器vue-devtools使用詳解
前言：
由于vue是數(shù)據(jù)驅(qū)動的，所以這就存在在開發(fā)調(diào)試中查看DOM結(jié)構(gòu)并不能解析出什么。
但是借助vue-devtools插件，我們就可以很容易的對數(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文件夾放入
最后
打開個vue寫的項目，f12打開調(diào)試工具即可進(jìn)行vue項目的調(diào)試。
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue獲取后臺json字符串方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue-cli3腳手架安裝方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue對象賦值視圖不更新問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue-路由精講 二級路由和三級路由的作用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue2.x 的雙向綁定原理，Vue 是利用的 Object.defineProperty() 方法進(jìn)行的數(shù)據(jù)劫持，利用 set、get 來檢測數(shù)據(jù)的讀寫。需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
這篇文章主要介紹了vue3中如何使用dayjs問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue動態(tài)添加表單validateField驗證功能實(shí)現(xiàn)
這篇文章主要介紹了vue動態(tài)添加表單validateField驗證功能實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
隨著vue3.4版本的發(fā)布,defineModel也正式轉(zhuǎn)正了,它可以簡化父子組件之間的雙向綁定,是目前官方推薦的雙向綁定實(shí)現(xiàn)方式,下面就跟隨小編一起深入了解一下defineModel的使用吧2024-02-02
vue監(jiān)聽滾動事件實(shí)現(xiàn)滾動監(jiān)聽
本文主要介紹了vue監(jiān)聽滾動事件實(shí)現(xiàn)滾動監(jiān)聽的相關(guān)資料。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
下面小編就為大家?guī)硪黄獪\談sass在vue注意的地方。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08