什么是vue-devtools？

目前創(chuàng)新互聯(lián)已為1000多家的企業(yè)提供了網(wǎng)站建設、域名、雅安服務器托管、網(wǎng)站托管、企業(yè)網(wǎng)站設計、方山網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應用，這可以極大地提高我們的調(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如何使用

當我們添加完vue-devtools擴展程序之后，我們在調(diào)試vue應用的時候，chrome開發(fā)者工具中會看一個vue的一欄，點擊之后就可以看見當前頁面vue對象的一些信息。vue-devtools使用起來還是比較簡單的，上手非常的容易，這里就細講其使用說明了。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。好了，接下來可以愉快的調(diào)BUG了~！~

新聞名稱：Vue調(diào)試神器vue-devtools安裝方法
URL標題：http://www.aaarwkj.com/article36/pegpsg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、移動網(wǎng)站建設、網(wǎng)站改版、手機網(wǎng)站建設、軟件開發(fā)、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)