配置VS Code 使其支援vue專案斷點除錯

2021-10-10 04:56:09 字數 1586 閱讀 1969

每個應用,不論大小,都需要理解程式是如何執行失敗的。當我們寫的程式沒有按照自己寫的邏輯走的時候,我們就會逐步一一排查問題。在平常開發過程中我們可能會借助console.log 來排查,但是現在我們可以借助 vs code 斷點來除錯專案。

vue專案斷點除錯主要有兩種方式:

在可以從 chrome 瀏覽器除錯你的 vue 元件之前,你需要更新 webpack 配置以構建 source map。做了這件事之後,我們的瀏覽器就有機會將乙個被壓縮的檔案中的**對應回其原始檔相應的位置。這會確保你可以在乙個應用中除錯,即便你的資源已經被 webpack 優化過了也沒關係

source map可以生成乙個源**的對映檔案.map檔案,可以讓你打包壓縮的**指向回源**。

module.exports =

}

npm跑起專案後,在chrome瀏覽器f12在控制台就可以進行相對應的斷點除錯了

注:devtool 設定成eval-cheap-module-source-map打包編譯速度會比source-map更快,所以建議在開發環境設定成eval-cheap-module-source-map,生成環境設定成cheap-module-source-map,更多配置可以檢視webpack文件

注意:**url引數配置要和vue.config.js的devserver保持一致

/src"

,//除錯的根路徑為src業務目錄下

"breakonload"

:true,:

/*",

"webpack:///./src/*"

:"$/*"}}

]}

vscode 除錯debugging引數詳情說明可以參考 官方文件

同時可以借助vscode除錯控制台來檢視console.log。

vs code設定支援jsx支援emmet

現在vscode中html檔案預設是支援emmet語法的,可以新建乙個html檔案,輸入html 5按tab鍵試一下,會自動生成html結構。但是中寫react的時候,中jsx語法中,輸入html標籤,按tab鍵不僅不會生成成套的html標籤,而且使用emmet的寫法也不管用。這個其實vs code...

修改ThinkPHP使其支援多級網域名稱部署

暫時只支援二級網域名稱的部署,更深層級的還在想使用group分組形式好還是使用router來進行檢測。不喜歡廢話,直接切入主題 修改thinkphp lib think util dispatcher.class.php 找到parsepathinfo方法,修改為 訪問 level.domain.c...

vscode原始碼編譯執行打包使其由英文變為中文

最近發現乙個很奇怪的問題,vscode打包前和打包後存在很大的不同的,正常來說,比如我們開發專案,實際上來說,本地怎麼樣,線上就怎麼樣,當然了,也不排除一些線上導致的bug。比如vscode原始碼已經啟用了中文語言包外掛程式,同時也修改了locale.json檔案 將檔案中的en改為zh cn 但是...