Comments (3)
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:
- 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.
- When you build React project, you will get minified and development (not minified) versions of bundles (files including connected sub-modules).
- Take development version bundle (usually it's gonna appear in build|dist folder) and copy it to your 'lib debugging project' directory.
- Create index.html and simpleCode.js (your code to start to debug from) there as well.
- Inject copied bundle script into index.html. Something like <script src="react.development.js">
- After, inject simpleCode.js in the same way.
- Identify which API endpoints you want to debug. For example, I've debugged ReactDOM.render and this.setState (Component.prototype.setState).
- Add usage of APIs from (9) to simpleCode.js. Keep it simple as possible. Work with React (Angular) via global variable on window namespace.
- 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.
from under-the-hood-reactjs.
Thank you for the detailed instructions. I will try this weekend!
from under-the-hood-reactjs.
Cool, thanks. Closing the issue then.
from under-the-hood-reactjs.
Related Issues (18)
- Can I translate this repository into Chinese? HOT 8
- Picture Intro.3 has overlapping elements where the name is not visible HOT 1
- Korean translate HOT 5
- How does react know that a stateless function is a react component HOT 5
- Help With Fiber HOT 5
- Setting up the infrastructure. HOT 3
- We have translation this repo into Chinese, do you consider add a ch-zn branch for Chinese version? HOT 3
- Use "React" instead of "ReactJS" HOT 1
- Possible typos in SVGs - part 7
- Possible text formatting issue in part 9 HOT 3
- Broken link to previous page in Part 13
- Updates HOT 1
- Russian translation HOT 1
- Under the hood react js
- Favicon Missing for Under-the-hood-ReactJS HOT 1
- What does the "clickable" mean in the title? HOT 2
- which tool you use to draw picture๏ผ HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from under-the-hood-reactjs.