怎么調試react源碼？下面本篇文章帶大家聊聊多種工具下的調試react源碼的方法，介紹一下在貢獻者、create-react-app、vite項目中如何debugger react的真實源碼，希望對大家有所幫助！
clone React
將Reactclone到本地，并安裝依賴.
git?clone?https://github.com/facebook/react.git
編譯項目
如果只是通過簡單的yarn build，并不會生成sourcemap, 這不是我們想要的，我們需要編譯出現代編輯器所需的sourcemap進行映射到實際源碼進行調試。
當前react項目并無法通過簡單增加參數生成sourcemap，我們需要修改scripts/rollup/build.js下的部分配置 【推薦學習：React、React】
①: 修改 sourcemap 為 true
②：注釋部分無法生成sourcemap的插件
ok，看起來很多，但其實大致都連在一起(353-355, 387-415), 注釋掉了幾個插件，此時我們可以進行build了
yarn?build
注意: 如果build失敗，提示你需要安裝jdk，根據報錯安裝即可。
成功效果如下：
進行debugger
我們根據React得知基礎開發文件目錄在 /fixtures/packaging/babel-standalone/dev.html中，于是我們根據該html先進行簡單的debug配置。
vscode
1、創建一個launch.json
2、修改launch.json配置
{ ??//?使用?IntelliSense?了解相關屬性。? ??//?懸停以查看現有屬性的描述。 ??//?欲了解更多信息，請訪問:?https://go.microsoft.com/fwlink/?linkid=830387 ??"version":?"0.2.0", ??"configurations":?[ ????{ ??????"type":?"chrome", ??????"request":?"launch", ??????"name":?"Open?dev.html", ??????//?這里路徑可能不一樣?做統一調整?修改為如下 ??????"file":?"${workspaceFolder}/fixtures/packaging/babel-standalone/dev.html" ????} ??] }
然后在源碼打上斷點，點擊打開debug即可看到運行到源碼成功.
注意：此時我們已經有了sourcemap，直接在/packages/react-dom或者/packages/react會運行到代碼打上斷點
webstrom
webstrom的十分簡單，在dev.html右鍵進行調試dev.html即可:
如上面的案例已經滿足你的大部分的源碼調試需求，并且我們也可以通過增加一些組件或者hook來進行調試:
如果你實在想在真實項目中進行源碼閱讀，可以繼續往下閱讀。
在create-react-app中debug
我們平時大多都基于create-react-app或者vite來運行項目，我們可以通過npm link來進行對源碼的鏈接。
上面的案例適合react開發者使用并且已經滿足你的小部分需求，但是我們平時大多都基于create-react-app或者vite來運行項目，我們可以通過npm link來鏈接一下即可。
①: 創建一個create-react-app項目
②: 在React項目中將 react,react-dom鏈接到全局.
注意: 需要根據你實際當前處于的位置去執行，總而言之就是到build/node_modules/react和build/node_modules/react-dom分別執行npm link就行啦.
cd?build/node_modules/react?&&?npm?link
如下就成功了一個:
再把react-dom也link吧.
cd?..?&&?cd?react-dom?&&?npm?link
③: 在create-react-app的項目中link react與react-dom
?npm?link?react?react-dom
大功小成，接下來開始正式的debugger.
vscode如何debugger
官方已經給出部分文檔, 參考文檔: React
- 先啟動項目 yarn start
- 增加launch.json配置: ?React
注意:
1、如果你項目端口進行了修改，需要把上方的端口也做修改.
2、官方提供的是edge瀏覽器，如果你想改谷歌瀏覽器只需要把type修改為chrome
筆者的配置如下:
{ ??"version":?"0.2.0", ??"configurations":?[ ????{ ??????"type":?"chrome", ??????"request":?"launch", ??????"name":?"調試creat-react-app源碼", ??????"url":?"http://localhost:3000", ??????"webRoot":?"${workspaceFolder}" ????} ??] }
- 找個位置打上斷點進行調試
③、④為我打上斷點的位置，點擊 ⑤ 即可看到進入源碼啦(可能要多點幾下)
至此：我們已經大功告成，可以進行源碼調試。
webstrom如何debugger
- 打上斷點
- 啟動項目 yarn start
- 使用按鍵打開調試面板, React
調試React vite項目
和上方一致，也是通過link
總結：
調試源碼的邏輯核心在于sourcemap，但是我們不難發現其中存在一些問題:
1、當前我們跨項目進行調試（源碼在react項目中，我們的項目在另外一個文件中），導致類型管理出現問題, 這是基于開發項目的定義管理，不同編輯器表現不同.
- vscode
這是因為vscode默認解析ts的，但是不會默認識別flow的語法，所以這種的代碼會解析成ts語法，就會報錯，我們在項目增加 .vscode/settings.json 增加配置:
{ ??"javascript.validate.enable":?false }
即表現正常，不再報錯:
webstrom則是無法找到定義
更多關于VSCode的相關知識，請訪問：React！
