terry-su / debug-react-source-code Goto Github PK

搭建阅读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.

License: GNU General Public License v3.0

JavaScript 97.04% HTML 2.96%

source-code

debug-react-source-code's Introduction

English Version Click Here

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

快速使用

方法1: 线上调试

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

（推荐）方法2：下载对应直接调试源码文件

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

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

版本列表（持续更新）：

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）：

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”

debug-react-source-code's People

Contributors

Stargazers

Watchers

debug-react-source-code's Issues

使用hook报错

我在代码编写

import {useState} from 'react'

function App () {
    const [data, setData] = useState(0)
}

报错

17.0.1分支无法打断点

debug-react-17.0.1分支，debug模式无法打断点（断点不生效）

17版本无法启动

Hi，16版本按文档可以正常启动，17版本不行哦。

[feature] 缺少HMR，有没有考虑补充上？

16.13.1分支，npm install 后， npm start启动时报错

报错信息如下

E:\Code\debug-react-source-code>npm start

> [email protected] start E:\Code\debug-react-source-code
> node index.js

E:\Code\debug-react-source-code\index.js:14
if (dirs.length === 0) { throw new Error('No React Source Code Directory Found!') }
                         ^

Error: No React Source Code Directory Found!
    at Object.<anonymous> (E:\Code\debug-react-source-code\index.js:14:32)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\haita\AppData\Roaming\npm-cache\_logs\2020-06-28T16_01_43_747Z-debug.log

16.13.1使用hooks报错

分支是debug-react-16.13.1，使用React.useState后报错，换成useState也不行，希望有空的话，能帮忙看一下

17.0.0分支是可以的

function App() {
    const [num, setNum] = React.useState(0)
    return <div>
                {num} 
                <button onClick={() => setNum(num => num+1)}>add</button>
            </div>
}

ReactDOM.render(<App/>, document.querySelector('#app'))

报错如下：

18.0.1 改了index.js里的代码，再次debugger，仍然还是上次的旧代码。不管多少次重新启动debugger还是一样的。

`'use strict';

var _React = React,
useEffect = _React.useEffect,
useRef = _React.useRef;

function App() {
var ref = useRef(null);

useEffect(function () {
    debugger;
    // beforeActivate
    console.log(123);
    ref.current.focus();
}, []);
return React.createElement(
    'div',
    null,
    React.createElement('input', { ref: ref }),
    React.createElement(
        'p',
        null,
        'Hello, React Source Code!'
    ),
    React.createElement(
        'h3',
        null,
        'Hello, React Source Code!',
        React.createElement(
            'span',
            null,
            '123'
        )
    )
);

}

ReactDOM.render(React.createElement(App, null), document.querySelector('#app'));
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbIlJlYWN0IiwidXNlRWZmZWN0IiwidXNlUmVmIiwiQXBwIiwicmVmIiwiY29uc29sZSIsImxvZyIsImN1cnJlbnQiLCJmb2N1cyIsIlJlYWN0RE9NIiwicmVuZGVyIiwiZG9jdW1lbnQiLCJxdWVyeVNlbGVjdG9yIl0sIm1hcHBpbmdzIjoiOzthQUMyQkEsSztJQUFwQkMsUyxVQUFBQSxTO0lBQVVDLE0sVUFBQUEsTTs7O0FBSWpCLFNBQVNDLEdBQVQsR0FBZTtBQUNYLFFBQU1DLE1BQU1GLE9BQU8sSUFBUCxDQUFaOztBQUVGRCxjQUFVLFlBQU07QUFDZDtBQUNBO0FBQ0FJLGdCQUFRQyxHQUFSLENBQVksR0FBWjtBQUNBRixZQUFJRyxPQUFKLENBQVlDLEtBQVo7QUFDRCxLQUxELEVBS0csRUFMSDtBQU1FLFdBQU87QUFBQTtBQUFBO0FBQ0gsdUNBQU8sS0FBS0osR0FBWixHQURHO0FBRUg7QUFBQTtBQUFBO0FBQUE7QUFBQSxTQUZHO0FBR0g7QUFBQTtBQUFBO0FBQUE7QUFBNkI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUE3QjtBQUhHLEtBQVA7QUFLSDs7QUFFREssU0FBU0MsTUFBVCxDQUFnQixvQkFBQyxHQUFELE9BQWhCLEVBQXdCQyxTQUFTQyxhQUFULENBQXVCLE1BQXZCLENBQXhCIiwiZmlsZSI6ImluZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG5jb25zdCB7dXNlRWZmZWN0LHVzZVJlZn0gPSBSZWFjdDtcblxuXG5cbmZ1bmN0aW9uIEFwcCgpIHtcbiAgICBjb25zdCByZWYgPSB1c2VSZWYobnVsbCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBkZWJ1Z2dlcjtcbiAgICAvLyBiZWZvcmVBY3RpdmF0ZVxuICAgIGNvbnNvbGUubG9nKDEyMylcbiAgICByZWYuY3VycmVudC5mb2N1cygpO1xuICB9LCBbXSlcbiAgICByZXR1cm4gPGRpdj5cbiAgICAgICAgPGlucHV0IHJlZj17cmVmfT48L2lucHV0PlxuICAgICAgICA8cCA+SGVsbG8sIFJlYWN0IFNvdXJjZSBDb2RlITwvcD5cbiAgICAgICAgPGgzPkhlbGxvLCBSZWFjdCBTb3VyY2UgQ29kZSE8c3Bhbj4xMjM8L3NwYW4+PC9oMz5cbiAgICA8L2Rpdj5cbn1cblxuUmVhY3RET00ucmVuZGVyKDxBcHAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKSJdfQ==`

Error: ENOENT: no such file or directory, open '/debug-react-source-code/PLACE-REACT-SOURCE-CODE-HERE/debug-react-source-code-debug-react-17.0.1/scripts/rollup/build.js'

文件缺少，无法启动