教你使用Vue.js的DevTools来调试你的vue项目
Vue DevTools項目的官方主頁位于GitHub上:https://github.com/vuejs/vue-devtools。你可以找到安裝說明,幫助解決一些問題等等。目前該擴展在Chrome和Firefox中得到支持,同樣Safari也得到了支持。如果你想從安裝擴展開始,請不要忘了重新加載你的網頁。
入門
讓我從一個超級簡單的Vue應用程序開始帶大家去熟悉Vue的DevTools。
正如你所看到的,我有一個輸入字段綁定到一個叫做name的模型,然后是一個列表,它遍歷一個cat數(shù)組。首先你可能會注意到你的開發(fā)工具是“宣布”自己的擴展類型 - 以防你忘了注意右邊的標簽。
點擊Vue選項卡將顯示特定于Vue的選項。首先是組件。在我的應用程序中,我只有一個Root應用程序,當您單擊它時,它會右側顯示可用的數(shù)據。
這是“l(fā)ive”,所以如果我輸入字段,它會立即反映在dev tools視圖中。更好的是,您可以直接在devtools中進行編輯。將鼠標懸停在項目上將使您可以編輯控件:
DevTools擴展到數(shù)組-有完全移除或添加items的選項。要添加item,您需要輸入有效的JSON,擴展名將在您輸入時提供實時反饋。
DevTools擴展也可以處理computed屬性:
我在代碼上在computed屬性添加oldcats函數(shù),將cats的數(shù)據遍歷輸出一個age>10的結果,DevTools擴展會將這個結果顯示出來。
你不能編輯這些值(因為這是computed的!),但是如果你在數(shù)據數(shù)組中編輯一個比10更大的值,它將立即顯示在下面的computed列表中。
Nice!可能在computed中查看相關函數(shù)的數(shù)據還沒令你感到興奮的話,那么遠程數(shù)據源呢?
我使用Star Wars API 作為我的數(shù)據源。項目一旦運行,我可以看到devtools擴展中的遠程數(shù)據,甚至可以編輯它。
自定義組件(Components)
那么自定義組件呢?這里是我定義了一個cat組件的腳本。坦白地說,Vue并沒有在默認情況下使用它,這是一個嚴重的錯誤。
現(xiàn)在看看devtools如何認識新的組件:
注意它是如何拾取發(fā)送給它的屬性的?,F(xiàn)在我要跳過Vuex選項卡,直接進入Events。GitHub倉庫中的自述文件不會告訴您一點是“Events”選項卡僅適用于組件所定制的自定義事件。所以當我使用了一個簡單的@ click =“doSomethingYo”測試,它并沒有呈現(xiàn),一開始我認為它在渲染的時候被破壞了其實并不是的。在上面的代碼示例中,您可以看到我有一個click事件,但是點擊它沒有發(fā)生任何事情。我不得不修改代碼來觸發(fā)出新的事件。
有了這個,你現(xiàn)在可以看到記錄的events。有趣的是,devtools擴展會讓你知道那一個事件被解雇了:
點擊標簽,然后event讓你檢查是什么觸發(fā)了它和其他額外的信息。
使用Vuex
現(xiàn)在讓我們看看Vuex。去年12月,Raymond Camden的博客上發(fā)布了一個示例應用程序,它利用Vuex構建了一個簡單的股票游戲。這就是Vue DevTools的真正意義所在。您可以深入了解存儲中的數(shù)據以及運行的突變列表。
左邊的是“l(fā)ive”,在股票應用中非???#xff0c;因為它有一個“心跳”,每隔幾秒就會發(fā)生一次突變。點擊它們可以提供有關特定突變的詳細信息。
更酷的是你可以通過一個特定的突變來拒絕或回滾你的存儲狀態(tài)。
您還可以使用導出/導入命令來保存/恢復您的Vuex狀態(tài)。這對于調試問題是非常有用的。
總結
以上是生活随笔為你收集整理的教你使用Vue.js的DevTools来调试你的vue项目的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Qt GUI编程
- 下一篇: 企业级低代码平台,Jeecgboot-V