https://github.com/swyxio/async-render-toolbox
BECAUSE PERFORMANCE SHOULD BE SEXY
https://github.com/swyxio/async-render-toolbox
Last synced: 5 months ago
JSON representation
BECAUSE PERFORMANCE SHOULD BE SEXY
- Host: GitHub
- URL: https://github.com/swyxio/async-render-toolbox
- Owner: swyxio
- License: mit
- Created: 2018-03-30T21:49:38.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-24T15:18:16.000Z (almost 8 years ago)
- Last Synced: 2025-10-08T19:05:35.544Z (5 months ago)
- Language: JavaScript
- Homepage: https://chrome.google.com/webstore/detail/fbchcodfbfjeededacomngobhnndcgol
- Size: 944 KB
- Stars: 320
- Watchers: 5
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - async-render-toolbox - yx | 315 | (JavaScript)
README
# 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](https://chrome.google.com/webstore/detail/fbchcodfbfjeededacomngobhnndcgol)
### Install the Firefox extension [here](https://addons.mozilla.org/en-US/firefox/addon/async-render-toolbox/)
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](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) or [chrome extension intercept](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Intercept_HTTP_requests)
* please open an issue if you have an idea you wanna work on/get help with!
## Genesis
This uses LagRadar, authored by [@mobz](https://twitter.com/mobz) with ideas and contributions [from others](https://twitter.com/dan_abramov/status/970028229271670784)
for [this talk](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html)
by [@dan_abramov](https://twitter.com/dan_abramov) and shared to the world with love. Permission granted to [swyx here](https://twitter.com/swyx/status/979552959133560832).
## references
Check [https://github.com/sw-yx/fresh-async-react](https://github.com/sw-yx/fresh-async-react) for more awesome stuff.