VSCode使React Vue代碼調試變得更爽
引言
作為前端開發，基本每天都要調試 Vue/React 代碼，不知道大傢都是怎麼調試的，但我猜大概有這麼幾種：
- 不調試，直接看代碼找問題
- console.log 打印日志
- 用 Chrome Devtools 的 debugger 來調試
- 用 VSCode 的 debugger 來調試
不同的調試方式效率和體驗是不一樣的，我現在基本都是用 VSCode debugger 來調試，效率又高、體驗又爽。
可能很多同學還不知道怎麼用 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使React Vue代碼調試變得更爽的詳細內容，更多關於VSCode調試React Vue的資料請關註WalkonNet其它相關文章！