在Vue中有關調試工具vue-devtools（詳細教學）

這篇文章主要介紹了Vue調試神器vue-devtools安裝方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

什麼是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使用起來還是比較簡單的，上手非常的容易，這裡就細講其使用說明了。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用javascript如何實現數字配對遊戲

#在vue.js中如何呼叫vuex儲存介面資料

在JavaScript中如何實作全選取消效果

#使用JavaScript如何實作左側選單效果

以上是在Vue中有關調試工具vue-devtools（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！