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