作為前端開發，基本每天都要調試 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 代碼，不管是調試業務代碼，還是想看會源碼都是很方便的。大家不妨試一下，會讓調試這件事情變得很愉悅的。