溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
什么是vue-devtools？
vue-devtools是一款基于chrome游覽器的插件，用于調試vue應用，這可以極大地提高我們的調試效率。接下來我們就介紹一下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文件夾。
/**
*如果看不見“加載已解壓的擴展程序…”按鈕，則需要勾選“開發者模式”。
*/
到此添加完成，效果圖如下：
結語：vue-devtools如何使用
當我們添加完vue-devtools擴展程序之后，我們在調試vue應用的時候，chrome開發者工具中會看一個vue的一欄，點擊之后就可以看見當前頁面vue對象的一些信息。vue-devtools使用起來還是比較簡單的，上手非常的容易，這里就細講其使用說明了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。好了，接下來可以愉快的調BUG了~！~
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
