Vue調(diào)試神器vue-devtools安裝方法
什么是vue-devtools？
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率。接下來我們就介紹一下vue-devtools的安裝。
安裝方式
1.chrome商店直接安裝：
vue-devtools可以從chrome商店直接下載安裝，非常簡單，這里就不過多介紹了。
2.手動安裝：
第一步：找到vue-devtools的github項目，并將其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
第二步：安裝項目所需要的npm包
npm install //如果太慢的話，可以安裝一個cnpm, 然后命令換成 cnpm install
第三步：編譯項目文件
npm run build
第四步：添加至chrome游覽器
游覽器輸入地址“chrome://extensions/”進入擴展程序頁面，點擊“加載已解壓的擴展程序…”按鈕，選擇vue-devtools>shells下的chrome文件夾。
/**
*如果看不見“加載已解壓的擴展程序…”按鈕，則需要勾選“開發(fā)者模式”。
*/
到此添加完成，效果圖如下：
結(jié)語：vue-devtools如何使用
當(dāng)我們添加完vue-devtools擴展程序之后，我們在調(diào)試vue應(yīng)用的時候，chrome開發(fā)者工具中會看一個vue的一欄，點擊之后就可以看見當(dāng)前頁面vue對象的一些信息。vue-devtools使用起來還是比較簡單的，上手非常的容易，這里就細講其使用說明了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。好了，接下來可以愉快的調(diào)BUG了~！~
相關(guān)文章
Vue2.0使用過程常見的一些問題總結(jié)學(xué)習(xí)
本篇文章主要介紹了Vue2.0使用過程常見的一些問題總結(jié)學(xué)習(xí)，詳細的介紹了使用中會遇到的各種錯誤，有興趣的可以了解一下。2017-04-04
這篇文章主要介紹了詳解nuxt路由鑒權(quán)(express模板)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
在 Vue 中,如果要向集合的頭部添加元素,可以使用 JavaScript 的 unshift 方法或 Vue 的 $set 方法,本文給大家介紹Vue 向集合的頭部添加元素的方法,感興趣的朋友一起看看吧2023-12-12
本篇文章主要介紹了vue-cli擴展多模塊打包的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Vue2?響應(yīng)式系統(tǒng)之深度響應(yīng)
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之深度響應(yīng)，文章基于Vue2?響應(yīng)式系統(tǒng)的相關(guān)資料展開對Vue2?深度響應(yīng)的介紹，需要的小伙伴可以參考一下2022-04-04
混入mixin提供了一種非常靈活的方式，來分發(fā)Vue組件中的可復(fù)用功能，一個混入對象可以包含任意組件選項，接下來通過本文給大家介紹VUE?mixin?使用,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue中的公共方法調(diào)用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue3 vite如何讀取文件內(nèi)容問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題
今天小編就為大家分享一篇解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題。具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在 Vue.js 應(yīng)用中使用 hash 模式是一種常見的路由配置方式,這種方式利用了 URL 的 hash（即 # 符號后面的部分）來實現(xiàn)頁面的跳轉(zhuǎn)和狀態(tài)管理,以下是使用 Vue 2 和 Vue Router 設(shè)置 hash 模式的步驟,需要的朋友可以參考下2024-10-10