資訊專欄INFORMATION COLUMN
VSCode使ReactVue代碼調(diào)試變得更爽
在前段開發(fā)中，大家會遇見調(diào)試 Vue/React 代碼，現(xiàn)在就給大家總結(jié)都有哪幾種：
先找代碼問題，在console.log 打印日志，用 Chrome Devtools 的 debugger 來調(diào)試，用 VSCode 的 debugger 來調(diào)試。
看到是不是不同，不僅效率大大提升就連體驗(yàn)也是超級幫的，這種體驗(yàn)讓人超級爽到爆炸。
很多人都好奇如何辦到的?現(xiàn)在就為大家介紹VSCode 調(diào)試網(wǎng)頁，下面聽我講述。
以下分別是 React 和 Vue 的：
用 VSCode 調(diào)試 React 代碼
我用 create-react-app 創(chuàng)建了一個 demo 項(xiàng)目，有這樣一個組件：
跑起來開發(fā)服務(wù)器：
瀏覽器顯示的界面是這樣的：
如何用 VSCode 調(diào)試它呢?
我們在根目錄下添加一個 .vscode/launch.json 的配置文件：
創(chuàng)建了一個調(diào)試配置，類型是 chrome，并指定調(diào)試的 url 是開發(fā)服務(wù)器的地址。
在 react 代碼里打兩個斷點(diǎn)：
然后點(diǎn)擊運(yùn)行：
看，XDM，它斷住了!調(diào)用棧、當(dāng)前環(huán)境的變量等都有。
釋放斷點(diǎn)，繼續(xù)往下走。
點(diǎn)擊的時候也能拿到對應(yīng)的事件對象：
怎么樣是不是便捷很多。
另外我還有一周是摸魚看會 react 源碼，那直接點(diǎn)擊調(diào)用棧里的某一幀看就行：
比如渲染的時候會調(diào)用 renderWithHooks 方法，里面的 workInProgress 對象就是當(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)試會相對會麻煩些，需要在上面的基礎(chǔ)上額外對路徑做一些映射。
因?yàn)?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)境變量，就是項(xiàng)目的跟路徑，這樣一映射之后，地址不就變成本地的文件了么?那么在本地文件中打斷點(diǎn)就能生效了：
看這里的路徑，明顯映射到項(xiàng)目下的文件了。
但是映射的時候后面還帶了個 hash，這個 hash 是會變得，怎么辦呢?
這個路徑是可以配置的，這其實(shí)就是 webpack 生成 sourcemap 的時候的文件路徑，可以通過 output.devtoolModuleFilenameTemplate 來配置：
可用的變量大家可以看文檔，就不展開了(隨便看一下就行)：
比如我把路徑配成了這樣：
那調(diào)試時的文件路徑就是這樣的：
前綴不用管，就看后面的部分，這不就去掉了 ?hash 了么
然后把它映射到本地文件：
這樣就又映射上了，在 vscode 打的斷點(diǎn)就生效了：
不管你是想調(diào)試 Vue 業(yè)務(wù)代碼，還是想看 Vue 源碼，體驗(yàn)都會很爽的。
總結(jié)
作為前端工程師，調(diào)試 Vue、React 代碼是每天都要做的事情，不同的調(diào)試方式體驗(yàn)和效率都是不一樣的。所以我想把我常用的 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)試這件事情變得很愉悅的。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/127567.html
摘要：本文作者王仕軍，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。想知道我接下來會寫些什么歡迎訂閱我的掘金專欄或知乎專欄前端周刊讓你在前端領(lǐng)域跟上時代的腳步。 showImg(https://segmentfault.com/img/remote/1460000009407536?w=592&h=314); 共 2127 字，讀完需 4 分鐘。我本周讀到 1 篇比較有趣的文章叫做《Th...
摘要：自從年月份對外公布以來，已經(jīng)經(jīng)過了個月的迭代，期間發(fā)布了幾十個正式版本，但一直沒有到，因?yàn)槲覀冇X得是個里程碑版本，我們必須做的足夠完善才敢稱之為。 自從17年11月份對外公布以來，KPC已經(jīng)經(jīng)過了8個月的迭代，期間發(fā)布了幾十個正式版本，但一直沒有到1.0，因?yàn)槲覀冇X得1.0是個里程碑版本，我們必須做的足夠完善才敢稱之為1.0。而如今我們有信心對外宣布：KPC 1.0終于來了！ 其實(shí)距離...
摘要：個人感悟自己公司也有項(xiàng)目在用，學(xué)的難點(diǎn)在于，其他的話上手挺快的，而且是尤大寫的，中文文檔也很完整，很適合新手。 showImg(https://segmentfault.com/img/remote/1460000012922985?w=1000&h=958); 當(dāng)紅辣子雞——vue 和去年一樣，vue是js項(xiàng)目中點(diǎn)贊數(shù)增加最多的，我們可以看下圖： showImg(https://se...
摘要：使用高亮類似的擴(kuò)展更強(qiáng)大的高亮擴(kuò)展，具有更多功能。為了檢查和檢查響應(yīng)，使用了之類的工具。在這里獲取這兩個擴(kuò)展自動閉合標(biāo)記和自動重命名標(biāo)記。類似的擴(kuò)展顯示提交歷史的精美圖表等等。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ Quokka.js Quokka.js 是一個用于 JavaScript 和 TypeScript 的實(shí)時運(yùn)行代碼平臺。這意味著它會實(shí)時運(yùn)行...
閱讀 566·2023-03-27 18:33
閱讀 755·2023-03-26 17:27
閱讀 655·2023-03-26 17:14
閱讀 608·2023-03-17 21:13
閱讀 541·2023-03-17 08:28
閱讀 1829·2023-02-27 22:32
閱讀 1324·2023-02-27 22:27
閱讀 2207·2023-01-20 08:28
