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