引言

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

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

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

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

我們分別看下 React 和 Vue 的：

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

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

跑起來開發(fā)服務(wù)器：

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

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

我們在根目錄下添加一個 .vscode/launch.json 的配置文件：

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

在 react 代碼里打兩個斷點：

然后點擊運行：

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

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

點擊的時候也能拿到對應(yīng)的事件對象：

是不是超方便！

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

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

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

再來看下 Vue 的：

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

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

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

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

那怎么映射呢？

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

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

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

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

看這里的路徑，明顯映射到項目下的文件了。

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

這個路徑是可以配置的，這其實就是 webpack 生成 sourcemap 的時候的文件路徑，可以通過 output.devtoolModuleFilenameTemplate 來配置：

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

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

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

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

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

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

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

總結(jié)

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

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

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

以上就是VSCode使React Vue代碼調(diào)試變得更爽的詳細內(nèi)容，更多關(guān)于VSCode調(diào)試React Vue的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論