Bagaimana untuk menyahpepijat kod sumber React? Pengenalan kepada kaedah penyahpepijatan menggunakan pelbagai alatan

Bagaimana untuk menyahpepijat kod sumber React? Artikel berikut akan membincangkan cara untuk menyahpepijat kod sumber React di bawah pelbagai alat, dan memperkenalkan cara untuk menyahpepijat kod sumber sebenar React dalam projek penyumbang, create-react-app, dan vite.

klon React

Klon React secara setempat dan pasang kebergantungan.

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

Kompilasi projek

Jika anda hanya menggunakan yarn build yang mudah, peta sumber tidak akan dihasilkan Ini bukan yang kita mahukan kod. sourcemap

Projek tindak balas semasa tidak boleh menjana peta sumber dengan hanya menambah parameter Kami perlu mengubah suai beberapa konfigurasi di bawah

[Pembelajaran yang disyorkan: scripts/rollup/build.jsTutorial vscode, Pengajaran pengaturcaraan]

①: Ubah suai peta sumber kepada benar

②: Bahagian ulasan tidak boleh menjana pemalam peta sumber

ok, nampaknya banyak , tetapi sebenarnya semuanya disambungkan Bersama (353-355, 387-415), mengulas beberapa pemalam, kini kami boleh membina

yarn build

Nota: Jika binaan gagal, anda akan digesa untuk memasang jdk. Hanya pasang mengikut mesej ralat.

Keputusan yang berjaya adalah seperti berikut:

Penyahpepijat

Kami mengikuti

Dokumen RasmiKami mengetahui bahawa direktori fail pembangunan asas berada dalam , jadi kami mula-mula melakukan konfigurasi nyahpepijat mudah berdasarkan html. /fixtures/packaging/babel-standalone/dev.html

vscode

1 Buat

launch.json

2 Ubah suai konfigurasi

launch.json

Kemudian letakkan titik putus dalam kod sumber, klik untuk membuka nyahpepijat dan anda akan melihat bahawa kod sumber berjaya dijalankan

{
  // 使用 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"
    }
  ]
}

Nota: Kami sudah mempunyai peta sumber pada masa ini, dan ia akan. jalankan terus dalam

atau

Letakkan titik putus dalam kod/packages/react-dom/packages/react

webstrom

webstrom sangat mudah , klik kanan pada dev.html untuk nyahpepijat

Itu sahaja:

dev.htmlKes di atas telah memenuhi kebanyakan keperluan penyahpepijatan kod sumber anda dan kami juga boleh nyahpepijat dengan menambahkan beberapa komponen atau cangkuk:

Jika anda benar-benar mahu membaca kod sumber dalam projek sebenar, anda boleh terus membaca.

Nyahpepijat dalam create-react-app

Kami biasanya menjalankan projek berdasarkan create-react-app atau vite, kami boleh menggunakan pautan npm untuk menyahpepijat pautan kod Sumber.

Kes di atas sesuai untuk pembangun react dan telah memenuhi sebahagian kecil daripada keperluan anda Namun, kebanyakan kami biasanya menjalankan projek berdasarkan create-react-app atau vite. .

①: Cipta projek buat-react-app

②: Pautkan

,

ke global dalam projek React reactreact-dom

Nota : Anda perlu melaksanakannya mengikut kedudukan semasa anda secara ringkasnya, hanya pergi ke

dan

dan laksanakan build/node_modules/react masing-masing satu: build/node_modules/react-domnpm link

Pautan react-dom sekali lagi.

cd build/node_modules/react && npm link

③: 在create-react-app的项目中link react与react-dom

 npm link react react-dom

大功小成，接下来开始正式的debugger.

vscode如何debugger

官方已经给出部分文档, 参考文档: 文档

• 先启动项目 yarn start
• 增加launch.json配置: 文档

注意:
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

webstorm就显得十分简单，参考官方文档: 文档

• 打上断点
• 启动项目 yarn start
• 使用按键打开调试面板, 文档

调试React vite项目

和上方一致，也是通过link

总结：

调试源码的逻辑核心在于sourcemap，但是我们不难发现其中存在一些问题:

1、当前我们跨项目进行调试（源码在react项目中，我们的项目在另外一个文件中），导致类型管理出现问题, 这是基于开发项目的定义管理，不同编辑器表现不同.

• vscode这是因为vscode默认解析ts的，但是不会默认识别flow的语法，所以这种的代码会解析成ts语法，就会报错，我们在项目增加 .vscode/settings.json 增加配置:

{
  "javascript.validate.enable": false
}

即表现正常，不再报错:

• webstorm

webstrom则是无法找到定义

更多关于VSCode的相关知识，请访问：vscode基础教程！

Atas ialah kandungan terperinci Bagaimana untuk menyahpepijat kod sumber React? Pengenalan kepada kaedah penyahpepijatan menggunakan pelbagai alatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!