Async Render Toolbox
Tools to help show off - or fix - your async-mode Render apps
This is an open source chrome extension you can toggle on or off to see whats going on with your laggy ass page. No affiliation with the React team, but was inspired by their work.
This is completely open source: https://github.com/sw-yx/async-render-toolbox I am still a nooby chrome extension developer, please tell me if I am requesting too many permissions.
Usage - chrome extension
Install the Chrome extension here
Install the Firefox extension here
Then:
- Navigate to any site (eg linkedin.com)
- Click the little browser icon to insert our javascript. Although we do request permissions, we never insert javascript on any site unless you click that button. (See our source code if you like, its open source)
- You should see the radar appear
- Now you can toggle it on or off using option + R (alt + R on windows)
- If you refresh your page or navigate away you'll need to click the icon to reactivate again (we try not to inject ourselves into every page, that would be douchey)
- Also try dragging the box around
- Enjoy tuning up your apps!
Development
This is open source - and very rough right now. This repo doesn't ship with a demo but it could.
Future features:
- Firefox - compatibility: Issue here: https://github.com/sw-yx/async-react-toolbox/issues/6
- network request controls like Dan had with the Suspense demo. probably using service workers or chrome extension intercept
- please open an issue if you have an idea you wanna work on/get help with!
Genesis
This uses LagRadar, authored by @mobz with ideas and contributions from others
for this talk
by @dan_abramov and shared to the world with love. Permission granted to swyx here.
references
Check https://github.com/sw-yx/fresh-async-react for more awesome stuff.