在vue專案開發過程中，當你遇到應用邏輯出現錯誤，但又無法準確定位的時候，知曉vue專案除錯技巧至關重要。
同後台專案開發一樣，可以在js實現的應用邏輯中設定斷點，並進行單步、進入方法內、跳出方法等除錯，從而準確定位問題根源。
本文主要針對jetbrains系列webstorm下vue專案進行除錯的2種方法：debugger和vue-devtools。
debugger是谷歌瀏覽器提供的除錯語句，其主要是通過停止js的執行，相當於設定斷點。它的使用方法很簡單， 只需要在我們的js語句中， 插入一行debugger;即可。
在js**編寫的過程中，我們都會通過瀏覽器的除錯模式（f12）來檢查**邏輯是否正確，大多數我們都是通過設定斷點來進行除錯。
應用debugger除錯vue專案，需要在專案中需要的位置寫debugger,專案執行後，開啟瀏覽器按f12，在chrome sources頁籤中就會直接進入斷點，至此可以進行單步、跳步除錯了。
應用devtools除錯工具，還需要在vue專案中man.js需要配置：
vue.config.devtools = true;如果除錯外掛程式安裝後，vue面板未出現，再到vue-devtools資料夾下執行一遍npm run dev。
也可以在聯網狀態下，在chrome或firefox瀏覽器的擴充套件外掛程式倉庫裡搜vue devtool，安裝vue.js devtools。
Vue高階（么伍玖） 動態樣式設定
在vue專案開發過程中，需要根據按鈕數量動態設定icon元素寬度。在el col標籤內，若只展示1個icon元素的話，則設定寬度為100 若顯示2個icon元素的話，則設定寬度為50 以此類推 v for btn,index in btnarr key index style el col comp...
vscode除錯vue專案
vscode如何除錯vue專案，通過f5進行斷點除錯，類似與vs進行除錯，vscode需要安裝外掛程式以及配置launch.json檔案。步驟一 1.找到 擴充套件 或者按快捷鍵 ctrl shift x 如下圖，輸入debugger for chrome查詢，並安裝。2.專案裡建立 launch....
vscode除錯vue專案
針對乙個剛上手的專案斷點除錯是不能少的，之前對於vue專案一直使用的是devtools，昨天完成了通過vscode對vue專案的斷點除錯今天記錄一下，chrome firefox同理所以只記錄乙個 準備 官網除錯講解 vscode 版本 版本 1.50.1 user setup 需要外掛程式 deb...