Vue專案除錯技能

大雄45 發表於 2022-07-16
Vue
導讀 在Vue專案開發過程中,當你遇到應用邏輯出現錯誤,但又無法準確定位的時候,知曉Vue專案除錯技巧至關重要。

同後臺專案開發一樣,可以在JS實現的應用邏輯中設定斷點,並進行單步、進入方法內、跳出方法等除錯,從而準確定位問題根源。

本文主要針對JetBrains系列WebStorm下Vue專案進行除錯的2種方法:debugger和Vue-devtools。

debugger

debugger是谷歌瀏覽器提供的除錯語句,其主要是通過停止JS的執行,相當於設定斷點。它的使用方法很簡單, 只需要在我們的JS語句中, 插入一行debugger; 即可。

在JS程式碼編寫的過程中,我們都會通過瀏覽器的除錯模式(F12)來檢查程式碼邏輯是否正確,大多數我們都是通過設定斷點來進行除錯。

應用debugger除錯Vue專案,需要在專案中需要的位置寫debugger,專案執行後,開啟瀏覽器按F12,在chrome sources頁籤中就會直接進入斷點,至此可以進行單步、跳步除錯了。

Vue-devtools

該除錯工具為針對Chrome瀏覽器而設計的開源除錯工具(Github地址),可以自行將該專案下載下來然後編譯,並將生成後的chrome外掛安裝至chrome中,步驟如下:
找到谷歌瀏覽器的擴充套件程式功能,勾選開發者模式,然後我們將外掛資料夾裡的 s>chorme資料夾直接拖到頁面中,完成安裝。

Vue專案除錯技能Vue專案除錯技能
然後執行本地專案用谷歌瀏覽器開啟就可以除錯了,如下圖所示。

Vue專案除錯技能Vue專案除錯技能

應用devtools除錯工具,還需要在vue專案中man.js需要配置:

	Vue.config.devtools = true;

安裝後, 需要關閉瀏覽器, 再重新開啟, 才能使用;

如果除錯外掛安裝後,vue皮膚未出現,再到vue-devtools資料夾下執行一遍 npm run dev

也可以在聯網狀態下,在Chrome或Firefox瀏覽器的擴充套件外掛倉庫裡搜vue devtool,安裝Vue.js devtools。

原文來自:

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2840955/,如需轉載,請註明出處,否則將追究法律責任。