Debug react source code on yourself custom builds with source map.

debug-react-source-code.md

Debug react source code on yourself custom builds with source map. First of all, read offical guide How to Contribute and be familiar with it's build flow.

Clone the repository, use specified branch or tag, eg: v16.8.0:

$ git clone --depth 1 --branch v16.8.0 [repo url]
$ cd ./react
$ yarn
...
AssertionError [ERR_ASSERTION]: Current node version is not supported for development

If your node version is higher than devEngines in package.json, add a fitted value to it, eg: 14.x.

The build tool of react is Rollup, and react doesn't enable source map by default. So edit the configuration ./scripts/rollup/build.js:

@@ Line 155 @@

 function getRollupOutputOptions() {
     ...
     return Object.assign(
         {},
         {
             ...
+            sourcemap: true, // add this
         },
     );
 }

$ yarn build "react/index,react-dom/index,scheduler" --type=UMD_DEV

Sourcemap is likely to be incorrect: a plugin was used to transform file

Rollup plugins consume source map next by next, so if one of plugins not return source map after transformed code, then brokens. Look for the broken one in getPlugins, it seems that the babel plugin does not enable source map. So edit the configuration again:

@@ Line 100 @@

 function getBabelConfig() {
     let options = {
         ...
+        sourceMaps: true,
     };
 };

Run build command, comes with a error:

TypeError: Cannot read property 'names' of null
    at new Link...

The names field is a part of source map specification, so our source map generation brokens again 😫 According to the error stack, position the exception code at ./node_modules/rollup/dist/rollup.js. Fix it:

@@ Line 17785 @@

    bundleSourcemapChain.forEach(map => {
+       if (map === null || map === undefined) return;
        source = new Link( map, [ source ] );
    });

Run the command finally successful, hu ~ Open ./fixtures/packaging/babel-standalone/dev.html in browser, add breakpoint and debug.

Code mappings not correct

It must be rollup plugin's problem. Just remove react's handy plugins:

@@ Line 293 @@

 function getPlugins() {
     return [
-        // Remove 'use strict' from individual source files.
-        {
-            transform(source) {
-                return source.replace(/['"]use strict['"']/g, '');
-            },
-        },
         ...
-        // License and haste headers, top-level `if` blocks.
-        {
-            transformBundle(source) {
-                return Wrappers.wrapBundle(...);
-            },
-        },
     ];
 }