Best Chrome Extensions For Developers
1-) Window Resizer
Resize the browser window to emulate various screen resolutions.
2-) JSON Formatter
Makes JSON easy to read. Open source.
3-) VisBug
Open source web design debug tools built with JavaScript: a FireBug for designers.
- Point, click & tinker
- Edit or style any page, in any state, like it's an artboard
- Inspect styles, spacing, distance, accessibility and alignment
- Nitpick layouts & content, in the real end environment, at any device size
- Leverage adobe/sketch skills
- Edit text, replace images
- Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities
- Design while DevTools simulates latency, i18n, media queries, platform constraints, CPUs, screensize, etc
- Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc)
- No waiting for developers to expose their legos, just go direct and edit the end state (regardless of framework) and execute/test an idea
4-) CSS To Tailwind
Automatically convert a website's CSS into TailwindCSS classes. Missing styles are added as arbitrary values.
5-) Web Developer Checklist
Analyses any web page for violations of best practices
6-) Cookie Auto Delete
Automatically delete cookies when a tab or the browser is closed!
7-) WhatRuns
Discover what runs a website. Frameworks, Analytics Tools, Wordpress Plugins, Fonts — you name it.
WhatRuns extension is one click away for you to find technologies used on any website you visit. From Developer Tools and Ad Networks to Wordpress Plugins and Themes, we detect even the new and upcoming tools and services.
8-) Fake Filler
A form filler that fills all inputs on a page with fake/dummy data.
Fake Filler is THE form filler to fill all input fields on a page with randomly generated fake data. This productivity boosting extension is a must for developers and testers who work with forms as it eliminates the need for manually entering values in fields.
9-) Font Finder
FontFinder is created for designers, developers, and typographers. It allows a user to analyze the font information of any element and copy any pieces of that information to the clipboard. Font Finder examines all the selected characters to detect the font used to display this particular character.
10-) User JavaScript and CSS
User JavaScript and CSS on any website
Userscript's and userstyle's — simple extension to inject own JavaScript or CSS rules to any page.
11-) Site Palette
Free browser extension that generates colour palettes. A must-have tool for designers and frontend developers. Grab colours for any website.
- FREE Site Palette API available!
- Several palette generators supported
- Shareable links created
- Preview palette image available for download
- Download auto-generated Sketch template
- Adobe Swatch support added
- Play with the palettes at coolors.co (we're not associated with them)
- Fine-tune the palettes at Google Art Palette
- Print styles added: print out or save palettes to PDF
12-) Checklist
A simple checklist addon to keep tracks of things.
Bonus : Floating Player — Picture-in-Picture Mode
This is an amazing Floating Video Player for you (Picture-in-Picture Mode). Float videos on top of any other websites or applications while browsing the web (always on top of other windows). Keep doing your work and watch the movie in a pop-up window! You can even resize your video pop-up and much more ...
