教你使用Vue.js的DevTools來調試你的vue項目

從哪裡去下載他

Vue DevTools項目的官方主頁位於GitHub上：https：//github.com/vuejs/vue-devtools。你可以找到安裝說明，幫助解決一些問題等等。目前該擴展在Chrome和Firefox中得到支持，同樣Safari也得到了支持。如果你想從安裝擴展開始，請不要忘了重新載入你的網頁。

入門

讓我從一個超級簡單的Vue應用程序開始帶大家去熟悉Vue的DevTools。

正如你所看到的，我有一個輸入欄位綁定到一個叫做name的模型，然後是一個列表，它遍歷一個cat數組。首先你可能會注意到你的開發工具是「宣布」自己的擴展類型 - 以防你忘了注意右邊的標籤。

點擊Vue選項卡將顯示特定於Vue的選項。首先是組件。在我的應用程序中，我只有一個Root應用程序，當您單擊它時，它會右側顯示可用的數據。

這是「live」，所以如果我輸入欄位，它會立即反映在dev tools視圖中。更好的是，您可以直接在devtools中進行編輯。將滑鼠懸停在項目上將使您可以編輯控制項：

DevTools擴展到數組-有完全移除或添加items的選項。要添加item，您需要輸入有效的JSON，擴展名將在您輸入時提供實時反饋。

DevTools擴展也可以處理computed屬性：

我在代碼上在computed屬性添加oldcats函數，將cats的數據遍歷輸出一個age>10的結果，DevTools擴展會將這個結果顯示出來。

你不能編輯這些值（因為這是computed的！），但是如果你在數據數組中編輯一個比10更大的值，它將立即顯示在下面的computed列表中。

Nice！可能在computed中查看相關函數的數據還沒令你感到興奮的話，那麼遠程數據源呢？

我使用Star Wars API 作為我的數據源。項目一旦運行，我可以看到devtools擴展中的遠程數據，甚至可以編輯它。

自定義組件（Components）

那麼自定義組件呢？這裡是我定義了一個cat組件的腳本。坦白地說，Vue並沒有在默認情況下使用它，這是一個嚴重的錯誤。

現在看看devtools如何認識新的組件：

?注意它是如何拾取發送給它的屬性的。現在我要跳過Vuex選項卡，直接進入Events。GitHub倉庫中的自述文件不會告訴您一點是「Events」選項卡僅適用於組件所定製的自定義事件。所以當我使用了一個簡單的@ click =「doSomethingYo」測試，它並沒有呈現，一開始我認為它在渲染的時候被破壞了其實並不是的。在上面的代碼示例中，您可以看到我有一個click事件，但是點擊它沒有發生任何事情。我不得不修改代碼來觸發出新的事件。

有了這個，你現在可以看到記錄的events。有趣的是，devtools擴展會讓你知道那一個事件被解僱了：

點擊標籤，然後event讓你檢查是什麼觸發了它和其他額外的信息。

使用Vuex

現在讓我們看看Vuex。去年12月，Raymond Camden的博客上發布了一個示例應用程序，它利用Vuex構建了一個簡單的股票遊戲。這就是Vue DevTools的真正意義所在。您可以深入了解存儲中的數據以及運行的突變列表。

左邊的是「live」，在股票應用中非常酷，因為它有一個「心跳」，每隔幾秒就會發生一次突變。點擊它們可以提供有關特定突變的詳細信息。

更酷的是你可以通過一個特定的突變來拒絕或回滾你的存儲狀態。

您還可以使用導出/導入命令來保存/恢復您的Vuex狀態。這對於調試問題是非常有用的。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！