怎麼配置VSCode，蘇爽的調試Vue、React 程式碼！

如何讓 Vue、React 程式碼的偵錯變得更爽？以下這篇文章介紹一下配置VSCode，蘇爽的調試Vue、React 程式碼的方法，希望對大家有幫助！

作為前端開發，基本上每天都要調試Vue/React 程式碼，不知道大家都是怎麼調試的，但我猜大概有這麼多種：

• 不調試，直接看程式碼找問題
• console.log 列印日誌
• 用Chrome Devtools 的debugger 來調試
• 用VSCode 的debugger 來調試

不同的調試方式效率和體驗是不一樣的，我現在基本上都是用VSCode debugger 來調試，效率又高、體驗又爽。 【推薦學習：《vscode入門教學》】

可能很多同學還不知道怎麼用 VSCode 調試網頁，這篇文章我就來介紹下。

我們分別看下React 和Vue 的：

用VSCode 調試React 程式碼

我用create-react-app 建立了一個demo 項目，有這樣一個元件：

跑起來開發伺服器：

#瀏覽器顯示的介面是這樣的：

#如何用VSCode 來偵錯它呢？

我們在根目錄下新增一個.vscode/launch.json 的設定檔：

建立了一個偵錯配置，類型是chrome，並指定調試的url 是開發伺服器的位址。

在react 程式碼裡打兩個斷點：

#然後點選執行：

看，XDM，它斷了！呼叫棧、當前環境的變數等都有。

釋放斷點，繼續往下走。

點擊的時候也能拿到對應的事件物件：

#是不是超方便！

而且當你寫業務累了，想摸魚看會react 源碼，那直接點擊調用棧裡的某一幀看就行：

比如渲染的時候會調用renderWithHooks 方法，裡面的workInProgress 物件就是目前fiber 節點，它的memorizedState 屬性就是hooks 存放值​​的地方：

用VSCode 來調試React 程式碼之後，調試業務碼或看原始碼的體驗都很爽，有木有。

再來看下 Vue 的：

用 VSCode 調試 Vue 程式碼

Vue 的調試會很麻煩一些，要在上面的基礎上額外對路徑做一些映射。

因為React 我們是直接寫jsx、tsx，它和編譯之後的js 文件一一對應，而Vue 不是，Vue 我們寫的是SFC（single file component） 格式的文件，需要vue-loader來把它們分成不同的文件，所以路徑單獨映射一下，才能對應到原始碼位置。

也就是調試配置裡多了個 sourceMapPathOverrides：

#那要怎麼映射呢？

可以在原始碼裡隨便加個debugger，在瀏覽器裡看下現在映射的路徑是啥：

這裡的webpack://test -vue-debug/src/App.vue?11c4 就是要映射的路徑，那要對應到哪裡呢？

很明顯是對應到本地的路徑，也就是這樣：

#workspaceRoot 是vscode 提供的環境變量，就是專案的跟路徑，這樣一映射之後，地址不就變成本地的文件了麼？那麼在本機檔案中打斷點就能生效了：

看這裡的路徑，明顯地對應到專案下的檔案了。

但是映射的時候後面還帶了個 hash，這個 hash 是會變得，怎麼辦呢？

這個路徑是可以設定的，這其實就是webpack 產生sourcemap 的時候的檔案路徑，可以透過output.devtoolModuleFilenameTemplate 來設定：

#可用的變數大家可以看文檔，就不展開了（隨便看一下就行）：

例如我把路徑配成了這樣：

那偵錯時的檔案路徑就是這樣的：

#前綴不用管，就看後面的部分，這不就去掉了?hash 了麼

然後把它映射到本地文件：

#這樣就又映射上了，在vscode 打的斷點就生效了：

不管你想調試Vue 業務程式碼，還是想看Vue 原始碼，體驗都會很酷的。

總結

身為前端工程師，調試 Vue、React 程式碼是每天都要做的事情，不同的偵錯方式體驗和效率都是不一樣的。所以我想把我常用的 VSCode 調試網頁的方式介紹給大家。

React 的調試相對簡單，只要添加一個chrome 類型的dubug 配置就行，Vue 的調試要麻煩一些，要做一次路徑映射，如果路徑裡有hash，還要改下生成路徑的配置，然後再映射（但也只需要配一次）。

用 VSCode 來偵錯 React/Vue 程式碼，不管是偵錯業務程式碼，還是想看會原始碼都是很方便的。大家不妨試一下，會讓調試這件事情變得很愉悅的。

更多關於VSCode的相關知識，請造訪：vscode教學！ ！

以上是怎麼配置VSCode，蘇爽的調試Vue、React 程式碼！的詳細內容。更多資訊請關注PHP中文網其他相關文章！