如何調(diào)試React源碼

這篇文章主要講解了“如何調(diào)試React源碼”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何調(diào)試React源碼”吧！

clone React

將Reactclone到本地，并安裝依賴.

git clone https://github.com/facebook/react.git

編譯項目

如果只是通過簡單的yarn build，并不會生成sourcemap, 這不是我們想要的，我們需要編譯出現(xiàn)代編輯器所需的sourcemap進行映射到實際源碼進行調(diào)試。

當前react項目并無法通過簡單增加參數(shù)生成sourcemap，我們需要修改scripts/rollup/build.js下的部分配置 

①: 修改 sourcemap 為 true②：注釋部分無法生成sourcemap的插件

ok，看起來很多，但其實大致都連在一起(353-355, 387-415), 注釋掉了幾個插件，此時我們可以進行build了

yarn build

注意: 如果build失敗，提示你需要安裝jdk，根據(jù)報錯安裝即可。

進行debugger

我們根據(jù)官方文檔得知基礎(chǔ)開發(fā)文件目錄在 /fixtures/packaging/babel-standalone/dev.html中，于是我們根據(jù)該html先進行簡單的debug配置。

vscode

1、創(chuàng)建一個launch.json

2、修改launch.json配置

{
  // 使用 IntelliSense 了解相關(guān)屬性。 
  // 懸停以查看現(xiàn)有屬性的描述。
  // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Open dev.html",
      // 這里路徑可能不一樣 做統(tǒng)一調(diào)整 修改為如下
      "file": "${workspaceFolder}/fixtures/packaging/babel-standalone/dev.html"
    }
  ]
}

然后在源碼打上斷點，點擊打開debug即可看到運行到源碼成功.

注意：此時我們已經(jīng)有了sourcemap，直接在/packages/react-dom或者/packages/react會運行到代碼打上斷點

webstrom

webstrom的十分簡單，在dev.html右鍵進行調(diào)試dev.html即可

如上面的案例已經(jīng)滿足你的大部分的源碼調(diào)試需求，并且我們也可以通過增加一些組件或者hook來進行調(diào)試

如果你實在想在真實項目中進行源碼閱讀，可以繼續(xù)往下閱讀。

在create-react-app中debug

我們平時大多都基于create-react-app或者vite來運行項目，我們可以通過npm link來進行對源碼的鏈接。

上面的案例適合react開發(fā)者使用并且已經(jīng)滿足你的小部分需求，但是我們平時大多都基于create-react-app或者vite來運行項目，我們可以通過npm link來鏈接一下即可。

①: 創(chuàng)建一個create-react-app項目

②: 在React項目中將 react,react-dom鏈接到全局.

注意: 需要根據(jù)你實際當前處于的位置去執(zhí)行，總而言之就是到build/node_modules/react和build/node_modules/react-dom分別執(zhí)行npm link就行啦.

cd build/node_modules/react && npm link

再把react-dom也link吧.

cd .. && cd react-dom && npm link

③: 在create-react-app的項目中l(wèi)ink react與react-dom

 npm link react react-dom

大功小成，接下來開始正式的debugger.

vscode如何debugger

官方已經(jīng)給出部分文檔, 參考文檔: 文檔

• 先啟動項目 yarn start

• 增加launch.json配置:  文檔

注意:
1、如果你項目端口進行了修改，需要把上方的端口也做修改.
2、官方提供的是edge瀏覽器，如果你想改谷歌瀏覽器只需要把type修改為chrome

筆者的配置如下:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "調(diào)試creat-react-app源碼",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

• 找個位置打上斷點進行調(diào)試③、④為我打上斷點的位置，點擊 ⑤ 即可看到進入源碼啦(可能要多點幾下)

感謝各位的閱讀，以上就是“如何調(diào)試React源碼”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何調(diào)試React源碼這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！