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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、虛擬主機(jī)、營銷軟件、網(wǎng)站建設(shè)、宜興網(wǎng)站維護(hù)、網(wǎng)站推廣。

clone React

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

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

編譯項(xiàng)目

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

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

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

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

yarn build

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

進(jìn)行debugger

我們根據(jù)官方文檔得知基礎(chǔ)開發(fā)文件目錄在 /fixtures/packaging/babel-standalone/dev.html中，于是我們根據(jù)該html先進(jìn)行簡單的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"
    }
  ]
}

然后在源碼打上斷點(diǎn)，點(diǎn)擊打開debug即可看到運(yùn)行到源碼成功.

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

webstrom

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

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

如果你實(shí)在想在真實(shí)項(xiàng)目中進(jìn)行源碼閱讀，可以繼續(xù)往下閱讀。

在create-react-app中debug

我們平時大多都基于create-react-app或者vite來運(yùn)行項(xiàng)目，我們可以通過npm link來進(jìn)行對源碼的鏈接。

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

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

②: 在React項(xiàng)目中將 react,react-dom鏈接到全局.

注意: 需要根據(jù)你實(shí)際當(dāng)前處于的位置去執(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的項(xiàng)目中l(wèi)ink react與react-dom

 npm link react react-dom

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

vscode如何debugger

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

• 先啟動項(xiàng)目 yarn start

• 增加launch.json配置:  文檔

注意:
1、如果你項(xiàng)目端口進(jìn)行了修改，需要把上方的端口也做修改.
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ǎn)進(jìn)行調(diào)試③、④為我打上斷點(diǎn)的位置，點(diǎn)擊 ⑤ 即可看到進(jìn)入源碼啦(可能要多點(diǎn)幾下)

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

網(wǎng)站名稱：如何調(diào)試React源碼
文章URL：http://sd-ha.com/article8/popiip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、企業(yè)建站、營銷型網(wǎng)站建設(shè)、搜索引擎優(yōu)化、品牌網(wǎng)站制作、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)