GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - Terry-Su/debug-react-source-code: 搭建阅读React源码调试环境,支持所有React版本细分文件断点调试。当前最新React版本:18.1.0。 Create an environment for reading and debugging react source code, support debugging breakpoints subdivision files of all react versions. Latest version: 18.1.0.

BranchesTags
Open more actions menu

Latest commit

 

History

39 Commits
39 Commits

Folders and files

NameName
Last commit message
Last commit date
.vscode
.vscode
 
 
PLACE-REACT-SOURCE-CODE-HERE
PLACE-REACT-SOURCE-CODE-HERE
 
 
assets/images
assets/images
 
 
dependencies
dependencies
 
 
example
example
 
 
test
test
 
 
.gitignore
.gitignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
index.js
index.js
 
 
package.json
package.json
 
 
rollup-plugin-add-path-info-annoation-for-each-file.js
rollup-plugin-add-path-info-annoation-for-each-file.js
 
 
shared.js
shared.js
 
 

Repository files navigation

English Version Click Here

如果这个项目对你有帮助,欢迎点个Star支持作者!

快速使用

方法1: 线上调试

访问地址:https://terry-su.github.io/debug-react-source-code/example/react-18.1.0

(推荐)方法2:下载对应直接调试源码文件

优势是可修改源码,比如在源码中添加注释。 使用步骤:

1 . 在Releases中选择要下载的版本。

版本列表(持续更新):

  • debug-react-source-code-18.1.0
  • debug-react-source-code-18.0.0
  • debug-react-source-code-17.0.2
  • debug-react-source-code-17.0.1
  • debug-react-source-code-17.0.0
  • debug-react-source-code-16.14.0
  • debug-react-source-code-16.13.1
  • debug-react-source-code-16.6.0

2 . 将压缩包解压后,用vscode打开该文件夹。vscode需安装Debugger for Chrome插件,用于在vscode对源码添加断点

3 . 安装依赖后,开启服务

npm install
npm start

4 . 在源码中添加断点,按F5启动调试即可

目录结构

目录结构为:

/react.development/
/react-dom.development/
/babel.js
/dependency-main.html
/dependency-react.html
/dependency-react-dom.html
/index.html
/index.js

其中,index.js即为调试入口文件。

实现原理

“另辟蹊径搭建阅读React源码调试环境-支持所有React版本断点调试细分文件”




Quick Start

Method 1: Debug Online

Visit Url:https://terry-su.github.io/debug-react-source-code/example/react-18.1.0

(Recommended)Method 2:Download Corresponding Files for Debugging Source Codes

The advantage is that you can modify the source code, such as adding comments to it. Usage Steps:

1 . Select version to download at Releases。

Version list(Update continuously):

  • debug-react-source-code-18.1.0
  • debug-react-source-code-18.0.0
  • debug-react-source-code-17.0.2
  • debug-react-source-code-17.0.1
  • debug-react-source-code-17.0.0
  • debug-react-source-code-16.14.0
  • debug-react-source-code-16.13.1
  • debug-react-source-code-16.6.0

2 . Unzip compressed file,then open folder using vscodevscode need to install extension:Debugger for Chrome,for adding breakpoints on source codes in vscode.

3 . After installing dependencies, start service

npm install
npm start

4 . Add breakpoints on source codes, then just press F5 to start debugging

Directory Structure

Directory structure is:

/react.development/
/react-dom.development/
/babel.js
/dependency-main.html
/dependency-react.html
/dependency-react-dom.html
/index.html
/index.js

notice index.js is the entry file for debugging.

How does this work

Maybe you need google translate.

“Create an environment for reading and debugging the React source code in a different way - support debugging breakpoints subdivision files of all react versions”

About

搭建阅读React源码调试环境,支持所有React版本细分文件断点调试。当前最新React版本:18.1.0。 Create an environment for reading and debugging react source code, support debugging breakpoints subdivision files of all react versions. Latest version: 18.1.0.

Topics

source-code

Resources

Readme
GPL-3.0 license
Activity

Stars

166 stars

Watchers

3 watching

Forks

31 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.