All These extensions are free, so there’s no harm in giving them all a try — you can easily disable or remove them by typing chrome://extensions/ into the Chrome address bar and something similar for Firefox as well.
If you’re Not much of a Developer / Designer ?
look at this list of general extensions for every user: List of Essential Extensions
- ColorZilla : Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies. also available for Mozilla Firefox (ColorZilla for firefox)
2. Pesticide for Chrome : outlining each element to better see placement on the page, you can debug your code for misalignments or floating elements easily.
3. Rulers, Guides, Eye Dropper and Color Picker : Display rulers, guides, grid and pick any color from webpage.
I just love it’s simple guide adding functionality and freedom for same.
4. PostMan: Postman makes API development faster, easier, and better.
5. JSONView: Really good app to understand complex structure of JSON from web source pages and APIs
6. Web Developer: Multiple tools commonly used by web developers, from working with styles to images.
7. Trinity Radar | Trinity Radar: Best tool for automated testing, created by folks at BigBinary, it works on cloud and makes testing flawless.
8. Firebug Lite : Firebug Lite provides the rich visual representation when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elements with your mouse, and live editing CSS properties.
(Firebug for Firefox)
9. WhatFont : the easiest way to find out the fonts used in a webpage.
10. PerfectPixel by WellDoneCode : This extension allows developers to put a semi-transparent image overlay over the top of the developed HTML and perform per pixel comparison between them.
there’s a similar tool “Comps”
Some other cool tools are: Page Ruler, SEO & Website Analysis, Web Developer, BuiltWith Technology Profiler, cssscan, CSS Shapes, Editor, Dimensions Legacy, UX Check, Browser Compatibility Detector, Check My Links