1. lighthouse - get a full audit of your site
Lighthouse does a full audit of your site along 5 dimensions: performance, accessibility, best practices, SEO, and whether you have a Progressive Web App. Each category is broken down into several metrics and includes opportunities for improvement and diagnostics.
Clicking Generate Report:
Generates this (note that localhost will have slower performance metrics):
2. stylebot - change the appearance of websites (+get rid of the annoying red highlighting on github prs)
Mostly this is useful to me to override the red highlighting that shows up in github pr's whenever you use an apostrophe, but which github can sometimes think is a syntax error. To override the syntax,
Go to the styles section of the extension:
create a new style with the following css:
3. jsonformatter - make json readable
This makes it much easier to read json and also lets you collapse trees within the json. You can also switch back to the 'raw' json if you want to
without syntax highlighting:
with syntax highlighting:
4. React Developer Tools - examine your react components, plus see what version of react different sites run
If you use React, this one is good to have. I don't use this one all that much but it can be useful. The "Profiler" tab helps you improve the performance of your app. As shown in the below screenshot, it breaks down all of your components and then highlights them, showing you all of the props on the righthand side:
You can also see what version of React different sites are running, or if they're using React at all, and open up the React tab by clicking inspect. Here is Facebook, for example:
5. Redux DevTools - See what's in the store, and examine state changes
This is the tool I use the most. It's an absolute must have if you use Redux. This lets you see whats in your store and also see the store update as different actions dispatch:
Top comments (0)