sw-yx / async-render-toolbox

BECAUSE PERFORMANCE SHOULD BE SEXY

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: #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.

async-render-toolbox's Issues

Feature: Pomber skin

instead of lag radar we can display @pomber's red bar: https://gist.github.com/pomber/befe41a6e13ddaa2ec3fdd2bdb4f61d6

img

Request to contribute example

Hey, Shall I contribute with few examples for this repo

Feature: Add Director mode

this is my first attempt at trapping XMLHttpRequests using purely injected JS. requires loading external JS by injecting a script tag in order to get around chrome's sandbox execution environment restrictions

https://twitter.com/swyx/status/982849855902158848

Request: Better keyboard shortcuts

#6 (comment)

basically i only chose one that works on Mac (oops...). Windows and Linux users no le gusta. Whats a better shortcut?

Feature: Firefox extension

i dont use firefox myself but i think we should try to support more browsers than chrome. there is demand for this per this HN comment: https://news.ycombinator.com/item?id=16725476

Feature Requests!

ideas here!

next on the list is to see if we can replicate the network control devtool that dan had. very possible that it can't be done by JS injection.