Top 10 Google Chrome Extensions For Front-end Developers
Hi Folks,
Google Chrome debugger tool is a boon for us, front-end developers. We can do a lot of work starting from inspecting an element in the web page to make use of the console, tracking source files to network calls, profiling a task to view and edit browser's storages like local storage, session storage, cookies, caches etc. Even advanced features like handling animations, toggling of device toolbar to view the browser's viewport in various devices to check the responsiveness, searching any key in all included files of the website, tracking sensors etc.
Apart from all these nice functionalities, Chrome also provides a lot of extensions for our purposes. Let's check out top 10 web extensions useful for Front-end development.
1. ColorZilla
ColorZilla is a pretty handy tool to pick color on a web page. It provides a color picker, history of picked colors, color palette browser, along with other options. You can check out the picked color in RGB or HEX format. As soon as you pick your required color, it also gets copied to clipboard automatically.
This extension you can use to get pixel dimensions and positioning, and measure elements on any web page. This lets your draw out a ruler to any page and displays the width, height, and position of it.
You can drag the edges of the ruler to resize it or use the arrow keys to move and resize.
Sometimes you need to capture a screenshot of the whole web page. But using window's snipping tool or print screen feature you can capture a part of the page or the browser window. But to capture a whole web page, this tool works pretty well. But this lacks in one point; if you have a popup or modal screen on top of your web page, then it can't stitch properly. Hence you can use the next tool in this list.
4. PicMonkey Extension
This extension lets you instantly grab images from any web page and open them up in PicMonkey for editing. You can perform basic edits, like crop and rotate, enhance your images with various effects, overlays, fonts, textures, frames etc. It also grabs all the icons, images used on the site and you can edit each of them.
5. What Font
Ever wondered which font a web page has used? the font name, size, style etc.? Well, this extension can help you in that. Not only it identifies the font but also provides all info on inspected element on the web page. All you need to do is select the extension and hover on the element.
This extension is for web developers and markup designers. PerfectPixel allows you to put a semi-transparent image overlay over the top of the developed HTML and perform per pixel comparison between them. This supports multiple overlays, inversion, and scaling etc.
A simple Base64 encoder and decoder tool for inline strings from any page by selecting and right-clicking on the selection. it encodes or decodes a string so that it conforms to the Base64 Data Encodings specification. but it's not much useful for encoding/decoding images or other binary content.
8. JSONView
This extension helps you in parsing and validating the JSON response. You can view the hierarchy structure by expanding/collapsing the keys and values.
A small and simple extension to delete, edit, add, search cookies in a site.
This is a unique browser based html5 mobile application development and testing tool. Ripple is a multi-platform mobile environment emulator that is custom-tailored to mobile HTML5 application development and testing.
You can also find several documentations and API extensions which would come handy at the time of development like Bootstrap Twitter Offline Docs, PHP Docs, Git Cheat Sheet etc.
There is also a separate extension named Web Developer, which adds a toolbar which is very handy to check quick effects like drawing an outline, show/hide images, playing with layouts, cookies, forms, colors etc.
Other useful developer tools are Window Resizer(to resize browser window to emulate various screen resolutions), Instant Wireframe(to view any web page as a wireframe), Code Formatter(to format any code language), CSS3 Generator(generator for text shadow, box shadow, transforms, border radius etc.), Toggle JavaScript(enable or disable JavaScript with a button), Lorem Ipsum Generator (Default Text) (a very nice and quick way to create and customize default text or generate Lorem Ipsum for quick usage), Clear Cache Shortcut(quickly clear all your browser cache with a single click) and so on.
P.S.: This article just lists out the extensions as per personal opinion. Please share your feedbacks and views with us.
Comments
Post a Comment