如何讓 Vue、React 程式碼的偵錯變得更爽？以下這篇文章介紹一下配置VSCode，蘇爽的調試Vue、React 程式碼的方法，希望對大家有幫助！
作為前端開發，基本上每天都要調試Vue/React 程式碼，不知道大家都是怎麼調試的，但我猜大概有這麼多種：
不同的調試方式效率和體驗是不一樣的，我現在基本上都是用VSCode debugger 來調試，效率又高、體驗又爽。 【推薦學習：《vscode入門教學》】
可能很多同學還不知道怎麼用 VSCode 調試網頁，這篇文章我就來介紹下。
我們分別看下React 和Vue 的：
我用create-react-app 建立了一個demo 項目，有這樣一個元件：
跑起來開發伺服器：
#瀏覽器顯示的介面是這樣的：
#如何用VSCode 來偵錯它呢？
我們在根目錄下新增一個.vscode/launch.json 的設定檔：
建立了一個偵錯配置，類型是chrome，並指定調試的url 是開發伺服器的位址。
在react 程式碼裡打兩個斷點：
#然後點選執行：
看，XDM，它斷了！呼叫棧、當前環境的變數等都有。
釋放斷點，繼續往下走。
點擊的時候也能拿到對應的事件物件：
#是不是超方便！
而且當你寫業務累了，想摸魚看會react 源碼，那直接點擊調用棧裡的某一幀看就行：
比如渲染的時候會調用renderWithHooks 方法，裡面的workInProgress 物件就是目前fiber 節點，它的memorizedState 屬性就是hooks 存放值的地方：
用VSCode 來調試React 程式碼之後，調試業務碼或看原始碼的體驗都很爽，有木有。
再來看下 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中文網其他相關文章！
