VSCode使React?Vue代碼調(diào)試變得更爽
引言
作為前端開發(fā)，基本每天都要調(diào)試 Vue/React 代碼，不知道大家都是怎么調(diào)試的，但我猜大概有這么幾種：
- 不調(diào)試，直接看代碼找問題
- console.log 打印日志
- 用 Chrome Devtools 的 debugger 來調(diào)試
- 用 VSCode 的 debugger 來調(diào)試
不同的調(diào)試方式效率和體驗(yàn)是不一樣的，我現(xiàn)在基本都是用 VSCode debugger 來調(diào)試，效率又高、體驗(yàn)又爽。
可能很多同學(xué)還不知道怎么用 VSCode 調(diào)試網(wǎng)頁，這篇文章我就來介紹下。
我們分別看下 React 和 Vue 的：
用 VSCode 調(diào)試 React 代碼
我用 create-react-app 創(chuàng)建了一個(gè) demo 項(xiàng)目，有這樣一個(gè)組件：
跑起來開發(fā)服務(wù)器：
瀏覽器顯示的界面是這樣的：
如何用 VSCode 調(diào)試它呢？
我們?cè)诟夸浵绿砑右粋€(gè) .vscode/launch.json 的配置文件：
創(chuàng)建了一個(gè)調(diào)試配置，類型是 chrome，并指定調(diào)試的 url 是開發(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)你寫業(yè)務(wù)累了，想摸魚看會(huì) react 源碼，那直接點(diǎn)擊調(diào)用棧里的某一幀看就行：
比如渲染的時(shí)候會(huì)調(diào)用 renderWithHooks 方法，里面的 workInProgress 對(duì)象就是當(dāng)前 fiber 節(jié)點(diǎn)，它的 memorizedState 屬性就是 hooks 存放值的地方：
用 VSCode 來調(diào)試 React 代碼之后，調(diào)試業(yè)務(wù)代碼或者看源碼的體驗(yàn)都很爽，有木有。
再來看下 Vue 的：
用 VSCode 調(diào)試 Vue 代碼
Vue 的調(diào)試會(huì)麻煩一些，要在上面的基礎(chǔ)上額外對(duì)路徑做一些映射。
因?yàn)?React 我們是直接寫 jsx、tsx，它和編譯之后的 js 文件一一對(duì)應(yīng)，而 Vue 不是，Vue 我們寫的是 SFC（single file component） 格式的文件，需要 vue-loader 來把它們分成不同的文件，所以路徑單獨(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í)候的文件路徑，可以通過 output.devtoolModuleFilenameTemplate 來配置：
可用的變量大家可以看文檔，就不展開了（隨便看一下就行）：
比如我把路徑配成了這樣：
那調(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)頁的方式介紹給大家。
React 的調(diào)試相對(duì)簡單，只要添加一個(gè) chrome 類型的 dubug 配置就行，Vue 的調(diào)試要麻煩一些，要做一次路徑映射，如果路徑里有 hash，還要改下生成路徑的配置，然后再映射（但也只需要配一次）。
用 VSCode 來調(diào)試 React/Vue 代碼，不管是調(diào)試業(yè)務(wù)代碼，還是想看會(huì)源碼都是很方便的。大家不妨試一下，會(huì)讓調(diào)試這件事情變得很愉悅的。
以上就是VSCode使React Vue代碼調(diào)試變得更爽的詳細(xì)內(nèi)容，更多關(guān)于VSCode調(diào)試React Vue的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue3學(xué)習(xí)筆記之依賴注入Provide/Inject
provide和inject可以實(shí)現(xiàn)嵌套組件之間進(jìn)行傳遞數(shù)據(jù),這兩個(gè)函數(shù)都是在setup函數(shù)中使用的,下面這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)筆記之依賴注入Provide?/?Inject的相關(guān)資料,需要的朋友可以參考下2023-05-05
webpack vue項(xiàng)目開發(fā)環(huán)境局域網(wǎng)訪問方法
下面小編就為大家分享一篇webpack vue項(xiàng)目開發(fā)環(huán)境局域網(wǎng)訪問方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助，一起跟隨小編過來看看吧2018-03-03
100行代碼實(shí)現(xiàn)一個(gè)vue分頁組功能
今天用vue來實(shí)現(xiàn)一個(gè)分頁組件，總體來說，vue實(shí)現(xiàn)比較簡單，樣式部分模仿了elementUI。接下來本文通過實(shí)例代碼給大家介紹100行代碼實(shí)現(xiàn)一個(gè)vue分頁組功能，感興趣的朋友跟隨小編一起看看吧2018-11-11
Vue $emit $refs子父組件間方法的調(diào)用實(shí)例
今天小編就為大家分享一篇Vue $emit $refs子父組件間方法的調(diào)用實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue開發(fā)環(huán)境跨域訪問問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
vue模態(tài)框?qū)崿F(xiàn)動(dòng)態(tài)錨點(diǎn)
這篇文章主要為大家詳細(xì)介紹了vue模態(tài)框?qū)崿F(xiàn)動(dòng)態(tài)錨點(diǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue3.x對(duì)echarts的二次封裝之按需加載過程詳解
echarts是我們后臺(tái)系統(tǒng)中最常用的數(shù)據(jù)統(tǒng)計(jì)圖形展示,外界對(duì)它的二次封裝也不計(jì)層數(shù),這篇文章主要介紹了vue3.x對(duì)echarts的二次封裝之按需加載,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了vue中音頻wavesurfer.js的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
Vue3+Vite項(xiàng)目部署后刷新白屏問題的解決方法
Vue3 + Vite 項(xiàng)目部署后出現(xiàn)了手動(dòng)刷新頁面時(shí)出現(xiàn)白屏的問題,下面小編就來和大家探討一下白屏出現(xiàn)的原因以及具體的解決方法,需要的可以參考下2025-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索過濾效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05