Development

Start

See packages/react-devtools/CONTRIBUTING.md:

 1# clone
 2git clone [email protected]:facebook/react.git
 3
 4# install
 5cd <react-repo>
 6yarn install
 7
 8# build react
 9cd <react-repo>
10cd scripts/release
11yarn install
12## we need provide token and commit sha1
13GH_TOKEN=$(gh auth token) ./download-experimental-build.js -c $(git rev-parse main)
14
15# build react-devtools-extensions
16cd <react-repo>
17cd packages/react-devtools-extensions
18npm run build:chrome:local
19
20# install chrome extension: packages/react-devtools-extensions/chrome/build/unpacked

Open Debug Mode

packages/react-devtools-shared/src/constants.js:15:

1// Flip this flag to true to enable verbose console debug logging.
2export const __DEBUG__ = true;

Open In Editor Function

__source property

1<MyComp __source={{
2    fileName: "xxx/xxx/xxx.js",
3    lineNumber: 1,
4    columnNumber: 2,
5}}>

React jsxDEV

 1react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV(
 2  MyComp,
 3  {
 4    children: "xxx",
 5  },
 6  void 0,
 7  false,
 8  {
 9    fileName: "xxx/xxx/xxx.js",
10    lineNumber: 1,
11    columnNumber: 2,
12  },
13  _this
14);

Implement: packages/react/src/jsx/ReactJSXElement.js

Doc: RFC: createElement changes and surrounding deprecations by sebmarkbage · Pull Request #107 · reactjs/rfcs

PS: source will not be carried from jsxDEV() -> ReactElement() -> element, and debugStack will be carried now. Remove __self and __source location from elements by sebmarkbage · Pull Request #28265 · facebook/react

Components Tree

packages/react-devtools-shared/src/devtools/views/Components/Tree.js will using FixedSizeList show the components, pass index property one by one to Element.

packages/react-devtools-shared/src/devtools/views/Components/Element.js will take index property and showing store.getElementAtIndex(index).

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js side bar show the detail of the selected item.

packages/react-devtools-shared/src/backend/fiber/renderer.js filter componenets through updateComponentFilters(componentFilters) -> mountFiberRecursively() -> shouldFilterFiber()