How was this achieved? about under-the-hood-reactjs

[Bogdan-Lyashenko]

Hi @niamleeson, thanks.

Well, nothing special, just create small 'old way JS project' 🙂
I can highlight the next steps I've done for React, you can do the same for Angular:

1. How to use not minified React code? You can try to find it somewhere from CDN or clone React (Angular) project from github and build it. Information how to do that is included in README.md file under 'Contributing guide'. In fact, you anyway need to clone project, if you want to see modules dependencies etc.
2. When you build React project, you will get minified and development (not minified) versions of bundles (files including connected sub-modules).
3. Take development version bundle (usually it's gonna appear in build|dist folder) and copy it to your 'lib debugging project' directory.
4. Create index.html and simpleCode.js (your code to start to debug from) there as well.
5. Inject copied bundle script into index.html. Something like <script src="react.development.js">
6. After, inject simpleCode.js in the same way.
7. Identify which API endpoints you want to debug. For example, I've debugged ReactDOM.render and this.setState (Component.prototype.setState).
8. Add usage of APIs from (9) to simpleCode.js. Keep it simple as possible. Work with React (Angular) via global variable on window namespace.
9. How actually match code from that big bundle to React ES6 modules from /src folder? Well, that's a bit tricky, requires some manual searching and analyzing. But, it's doable, copy line of code from a bundle and search for it around the module's code, usually, it's single match.

Pretty much it. Hope that help. Feel free to ask more details about any points if you need. Thanks.

[niamleeson]

Thank you for the detailed instructions. I will try this weekend!

[Bogdan-Lyashenko]

Cool, thanks. Closing the issue then.