作為前端開(kāi)發(fā)，基本每天都要調(diào)試 Vue/React 代碼，不知道大家都是怎么調(diào)試的，但我猜大概有這么幾種：
不同的調(diào)試方式效率和體驗(yàn)是不一樣的，我現(xiàn)在基本都是用 來(lái)調(diào)試，效率又高、體驗(yàn)又爽。
可能很多同學(xué)還不知道怎么用 調(diào)試網(wǎng)頁(yè)，這篇文章我就來(lái)介紹下。
我們分別看下 React 和 Vue 的：
用 調(diào)試 React 代碼
我用 -react-app 創(chuàng)建了一個(gè) demo 項(xiàng)目，有這樣一個(gè)組件：
跑起來(lái)開(kāi)發(fā)服務(wù)器：
瀏覽器顯示的界面是這樣的：
如何用 調(diào)試它呢？
我們?cè)诟夸浵绿砑右粋€(gè) ./.json 的配置文件：
創(chuàng)建了一個(gè)調(diào)試配置，類型是 ，并指定調(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)用 方法，里面的 對(duì)象就是當(dāng)前 fiber 節(jié)點(diǎn)，它的 屬性就是 hooks 存放值的地方：
用 來(lái)調(diào)試 React 代碼之后，調(diào)試業(yè)務(wù)代碼或者看源碼的體驗(yàn)都很爽，有木有。
再來(lái)看下 Vue 的：
用 調(diào)試 Vue 代碼
Vue 的調(diào)試會(huì)麻煩一些，要在上面的基礎(chǔ)上額外對(duì)路徑做一些映射。
因?yàn)?React 我們是直接寫(xiě) jsx、tsx，它和編譯之后的 js 文件一一對(duì)應(yīng)vue 路徑跳轉(zhuǎn)頁(yè)面沒(méi)變，而 Vue 不是，Vue 我們寫(xiě)的是 SFC（ file ） 格式的文件，需要 vue- 來(lái)把它們分成不同的文件，所以路徑單獨(dú)映射一下，才能對(duì)應(yīng)到源碼位置。
也就是調(diào)試配置里多了個(gè) es：
那怎么映射呢？
可以在源碼里隨便加個(gè) ，在瀏覽器里看下現(xiàn)在映射的路徑是啥：
這里的 ://test-vue-debug/src/App.vue?11c4 就是要映射的路徑，那映射到哪里呢？
很明顯是映射到本地的路徑，也就是這樣：
是 提供的環(huán)境變量，就是項(xiàng)目的跟路徑，這樣一映射之后，地址不就變成本地的文件了么？那么在本地文件中打斷點(diǎn)就能生效了：
image.png
看這里的路徑，明顯映射到項(xiàng)目下的文件了。
但是映射的時(shí)候后面還帶了個(gè) hash，這個(gè) hash 是會(huì)變得，怎么辦呢？
這個(gè)路徑是可以配置的，這其實(shí)就是 生成 的時(shí)候的文件路徑，可以通過(guò) . 來(lái)配置：
可用的變量大家可以看文檔，就不展開(kāi)了（隨便看一下就行）：
比如我把路徑配成了這樣：
那調(diào)試時(shí)的文件路徑就是這樣的：
前綴不用管，就看后面的部分，這不就去掉了 ?hash 了么
然后把它映射到本地文件：
這樣就又映射上了，在 打的斷點(diǎn)就生效了：
不管你是想調(diào)試 Vue 業(yè)務(wù)代碼，還是想看 Vue 源碼，體驗(yàn)都會(huì)很爽的。
總結(jié)
作為前端工程師，調(diào)試 Vue、React 代碼是每天都要做的事情，不同的調(diào)試方式體驗(yàn)和效率都是不一樣的。所以我想把我常用的 調(diào)試網(wǎng)頁(yè)的方式介紹給大家。
React 的調(diào)試相對(duì)簡(jiǎn)單，只要添加一個(gè) 類型的 dubug 配置就行，Vue 的調(diào)試要麻煩一些，要做一次路徑映射，如果路徑里有 hash，還要改下生成路徑的配置，然后再映射（但也只需要配一次）。
用 來(lái)調(diào)試 React/Vue 代碼，不管是調(diào)試業(yè)務(wù)代碼，還是想看會(huì)源碼都是很方便的。大家不妨試一下，會(huì)讓調(diào)試這件事情變得很愉悅的。
【新產(chǎn)品上架】
告別 Vuex ！這里有一個(gè)輕量級(jí)的狀態(tài)管理
25 個(gè) Vue 技巧，開(kāi)發(fā)了 5 年了，才知道還能這么用
基于Vue3 寫(xiě)一個(gè)更好用的在線幫助文檔工具
11+實(shí)戰(zhàn)技巧vue 路徑跳轉(zhuǎn)頁(yè)面沒(méi)變，讓你輕松從Vue過(guò)渡到React
熱門 ： 4 款專屬極客衛(wèi)衣，程序員秒懂！