作為前端開(kāi)發(fā)，基本每天都要調(diào)試 Vue/React 代碼，不知道大家都是怎么調(diào)試的，但我猜大概有這么幾種：

• 不調(diào)試，直接看代碼找問(wèn)題
• console.log 打印日志
• 用 Chrome Devtools 的 debugger 來(lái)調(diào)試
• 用 VSCode 的 debugger 來(lái)調(diào)試

不同的調(diào)試方式效率和體驗(yàn)是不一樣的，我現(xiàn)在基本都是用 VSCode debugger 來(lái)調(diào)試，效率又高、體驗(yàn)又爽。

可能很多同學(xué)還不知道怎么用 VSCode 調(diào)試網(wǎng)頁(yè)，這篇文章我就來(lái)介紹下。

我們分別看下 React 和 Vue 的：

用 VSCode 調(diào)試 React 代碼

我用 create-react-app 創(chuàng)建了一個(gè) demo 項(xiàng)目，有這樣一個(gè)組件：

跑起來(lái)開(kāi)發(fā)服務(wù)器：

瀏覽器顯示的界面是這樣的：

如何用 VSCode 調(diào)試它呢?

我們?cè)诟夸浵绿砑右粋€(gè) .vscode/launch.json 的配置文件：

創(chuàng)建了一個(gè)調(diào)試配置，類型是 chrome，并指定調(diào)試的 url 是開(kāi)發(fā)服務(wù)器的地址。

在 react 代碼里打兩個(gè)斷點(diǎn)：

然后點(diǎn)擊運(yùn)行：

看，XDM，它斷住了!調(diào)用棧、當(dāng)前環(huán)境的變量等都有。

釋放斷點(diǎn)，繼續(xù)往下走。

點(diǎn)擊的時(shí)候也能拿到對(duì)應(yīng)的事件對(duì)象：

是不是超方便!

而且當(dāng)你寫(xiě)業(yè)務(wù)累了，想摸魚(yú)看會(huì) react 源碼，那直接點(diǎn)擊調(diào)用棧里的某一幀看就行：

比如渲染的時(shí)候會(huì)調(diào)用 renderWithHooks 方法，里面的 workInProgress 對(duì)象就是當(dāng)前 fiber 節(jié)點(diǎn)，它的 memorizedState 屬性就是 hooks 存放值的地方：

用 VSCode 來(lái)調(diào)試 React 代碼之后，調(diào)試業(yè)務(wù)代碼或者看源碼的體驗(yàn)都很爽，有木有。

再來(lái)看下 Vue 的：

用 VSCode 調(diào)試 Vue 代碼

Vue 的調(diào)試會(huì)麻煩一些，要在上面的基礎(chǔ)上額外對(duì)路徑做一些映射。

因?yàn)?React 我們是直接寫(xiě) jsx、tsx，它和編譯之后的 js 文件一一對(duì)應(yīng)，而 Vue 不是，Vue 我們寫(xiě)的是 SFC(single file component) 格式的文件，需要 vue-loader 來(lái)把它們分成不同的文件，所以路徑單獨(dú)映射一下，才能對(duì)應(yīng)到源碼位置。

也就是調(diào)試配置里多了個(gè) sourceMapPathOverrides：

那怎么映射呢?

可以在源碼里隨便加個(gè) debugger，在瀏覽器里看下現(xiàn)在映射的路徑是啥：

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

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

workspaceRoot 是 vscode 提供的環(huán)境變量，就是項(xiàng)目的跟路徑，這樣一映射之后，地址不就變成本地的文件了么?那么在本地文件中打斷點(diǎn)就能生效了：

看這里的路徑，明顯映射到項(xiàng)目下的文件了。

但是映射的時(shí)候后面還帶了個(gè) hash，這個(gè) hash 是會(huì)變得，怎么辦呢?

這個(gè)路徑是可以配置的，這其實(shí)就是 webpack 生成 sourcemap 的時(shí)候的文件路徑，可以通過(guò) output.devtoolModuleFilenameTemplate 來(lái)配置：

可用的變量大家可以看文檔，就不展開(kāi)了(隨便看一下就行)：

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

那調(diào)試時(shí)的文件路徑就是這樣的：

前綴不用管，就看后面的部分，這不就去掉了 ?hash 了么？

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

這樣就又映射上了，在 vscode 打的斷點(diǎn)就生效了：

不管你是想調(diào)試 Vue 業(yè)務(wù)代碼，還是想看 Vue 源碼，體驗(yàn)都會(huì)很爽的。

總結(jié)

作為前端工程師，調(diào)試 Vue、React 代碼是每天都要做的事情，不同的調(diào)試方式體驗(yàn)和效率都是不一樣的。所以我想把我常用的 VSCode 調(diào)試網(wǎng)頁(yè)的方式介紹給大家。

React 的調(diào)試相對(duì)簡(jiǎn)單，只要添加一個(gè) chrome 類型的 dubug 配置就行，Vue 的調(diào)試要麻煩一些，要做一次路徑映射，如果路徑里有 hash，還要改下生成路徑的配置，然后再映射(但也只需要配一次)。

用 VSCode 來(lái)調(diào)試 React/Vue 代碼，不管是調(diào)試業(yè)務(wù)代碼，還是想看會(huì)源碼都是很方便的。大家不妨試一下，會(huì)讓調(diào)試這件事情變得很愉悅的。