Vue專案除錯技能

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

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

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

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

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

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

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

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

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

	Vue.config.devtools = true;

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

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

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

原文來自：