Interesting observation: Makers are abstracting out individual features of the Chrome browser console and enhancing them into better, stand-alone productivity apps for designers and developers. Here’s examples I saw:
- Sizzy allows you to inspect different screen sizes for their website or app at a glance.
- CSS Scan is the fastest and easiest way to inspect and copy CSS of any element.
- PixelSnap is a tool to measure the pixel length of anything on the screen.
Getting the information that these apps provide can be done on the console itself of course, but the UX of it on Chrome is clunky and clumsy. These apps abstract out the individual features and improved on them, making it more seamless and easy to use or view.
That made me think: is there anything else that we need on the console that can become stand-alone, point-and-click products?
- Inspect JS scripts?
- Inspect animations and animation speed?
- Inspect on screen sizes for all brands of mobile, tablet and monitor screens? (like this table of information screensiz.es)
- Check for accessibility?
- Check network/performance?
- Check underlying CMS/template used?
- Check for security?
- Check for whois?
I’d recently been brainstorming on products to make, so this is an interesting angle to go on. It also made me wonder: is there any product that we use right now that has lots of features but has complex and clumsy UX, of which we can abstract out a few of the most commonly used features into stand-alone products? For example, remove.bg does one thing really well that you can do in clunky Photoshop - remove the background of any image.
What other popular tasks do we do on apps like Photoshop or Chrome console that can be abstracted out and made better?
Follow my daily writings on Lifelog, where I write about learning to code, goals, productivity, indie hacking and tech for good.