React-source-debugger NPM

English｜简体中文

react-source-debugger

A tool for quickly setting up the environment of debugging React source code.

Install

npm i -g react-source-debugger
# or
yarn global add react-source-debugger
# or
pnpm add -g react-source-debugger

Usage

Simplest usage, only 3 steps:

rsd create my-react-debug-app
cd my-react-debug-app
rsd init

Now, we have react(React source code directory)、test-demo(test project) and rsd.code-workspace(vscode workspace file) under my-react-debug-app.

And then, we can start debugging by doing these:

open rsd.code-workspace with vscode;
start dev in test-demo;
launch debug within vscode Run and Debug module.

Configuration

rsd init automatically finds configuartion file(rsd.config.{js,mjs,cjs,json}) from current directory. If not found, will use default configuration.

You can manually specify configuration:

rsd init --config /path/to/rsd.config.js

Options

export default {
  react: {
    dir: '/path/to/react/source/code/',
    version: '18.2.0',
  },
  testProject: {
    dir: '/path/to/test/project/',
    scaffold: 'vite',
    useTs: true,
    mode: 'development',
    devPort: 3000,
  },
};

react.dir

source code directory of React, default where rsd init runs.

react.version

version of React, default 18.2.0. Only supports partial versions, will automatically match version with same major.

supports：

16.14.0
17.0.2
18.2.0

testProject.dir

directory of test project, default directory where rsd init runs。If manually specify this option, other options under testProject are ineffective, maybe yiou should adjust your code to ensure you can debug correctly.