When it comes to website design and development, the whole process without be essentially complete without fully testing it live on a real browser. The leading browsers of today like Google Chrome, Opera, Mozilla Firefox, and Safari are but some of the most important browsers that you should not miss on this list.
However, in comparison to other browsers, I personally prefer Google Chrome when it comes to website design and development. Well, the Firefox of Mozilla is a good candidate, more because of its famous plugin called Firebug which is a very productive and top-of-the-line tool for development.
While Firefox still has a lot to show off in this case, it is nevertheless inevitable that the Chrome browser still leads when it comes to the number of plugins available.
Today we are to look at the leading tools and plugins within the Chrome browser that should help you and me in our web design and development process.
1. Firebug Lite
Since I mentioned beforehand the Firebug of Firefox, at least we got a ‘lite’ version of it for Google Chrome. I personally do not understand why we can’t get a full-version of it, but if we are talking about the essential features and capabilities, at least we have them on the list. Included in the list are: quick and easy access with toolbar integration, live inspection and modification of elements especially the CSS ones, rich representation of DOM elements, and a powerful console.
2. WhatFont
The number of font styles and faces compatible on the web browsers these days are getting larger and larger, and it’s time for us designers and developers to go beyond what we have been used to. The WhatFont extension of Chrome allows users to quickly learn the font family of a font in a webpage live by simply hovering an appointed cursor over it. More information can also be seen when clicked, giving you the live preview of the font, the font size and line spacing, and even the provider such as Adobe Web Fonts.
3. Responsive Inspector
The basic trend now is that virtually all webpages on the Internet should be responsive already, more because of the other viewing methods and screen sizes. If you are very particular to making sure your media queries and viewports work properly, then this plugin will help you determine what goes wrong, and how well your development went. Adding to this, you can also get full-screen web page screen shots without an extra tool.
4. MeasureIt!
As developers, we wanted a pixel-perfect rendering of a flat image into a fully-working HTML document. This tool should help you get the right dimensions of each element you see on the browser, and what makes this tool incredible is that you can simply drag along the page and the values of width and height are shown live in pixels. No more screen rulers and no more opening of the console window.
5. Web Developer
Unlike any other usual tools for code development available for browsers, this plugin for Chrome works like a charm in a real multitude of ways. You can work distraction free by eliminating all flash ads and even plugins and other features. You can resize a webpage to a set width and height or resolution. You can also isolate or even disable some elements or an object for you to view them exclusively. Check all other features for yourself today!
6. Resolution Test
Most of the displays and screens these days do not matter on size anymore; think of the resolution of the display as the more important one. An 11-inch display can cramp a full HD resolution of 1920×1080, and 10-inch tablets can only have resolutions of 800×480. This plugin for Chrome helps a lot by allowing you to frame your webpage on different pre-set resolutions, and you can even add your own custom resolution for future use.
7. ColorPicker 0.9
A DOM-Explorer-like plugin for Chrome, this color picker tool is no ordinary tool at all. Said to be aimed specifically for serious developers, actually you can really take a lot of advantage using this one tool alone. Included in the features is the live color picking feature which can even allow you to see color changes without delving into CSS files, adjustable color picking cursor size, and so on.
8. BuiltWith Technology Profiler
The web design and development technology is constantly evolving, and if you are serious with the craft, you’d want to get updated. You wanted to learn what takes place behind a breath-taking webpage you encounter. With the BuiltWith, you can easily check on the technology running a webpage, so that you can also learn it if you want. This plugin works by tracking widgets, analytics, frameworks, advertising, standards, software, etc.
9. CSS-Shack
While CSS is so capable, chances are it is also so perplexing, more if you are handling a lot of elements within the same style sheet. Thankfully, the CCS-Shack of Chrome works magically by letting you create CSS styles layer bylayer as you’d do in Photoshop, and export it as a single CSS file or simply on a clipboard. Not enough? Check out the beautiful and tempting interface.
10. Codev.it
Wanting to work out a project with a team from the cloud? The Codev tool is so far the best online code editor I found for Chrome, and its features are way too big for me to fully mention. Aside from syntax-highlighting and code completion, and aside from working with collaborators, you can also use the built-in compiler for LESS and SASS, and even manage your SQLite database. Wanted to do more in less time? Use the included Time Tracker feature.
11. Speed Tracer by Google
If you are fond of Google products and you love Google’s own Analytics tool, then check out this another form of analytics specifically for web developers. Using this tool with give you a fully detailed assessment of your site’s performance, and can even give you hints as to what you can do to improve it. The tool also debugs your site for problems caused by JavaScript, style sheets, DOM events, timer fires, and so on, without the need for extensive use of resources.
12. CSSViewer
Opening the console can be easy, but targeting specific IDs or classes or any other tags for CSS inspection can be fuzzy. The CSSViewer is an extension you can use easily for checking out the styling of any elements without going to the console. Simply click the button, click on the desired element to be inspected, and voila, you get a nice report of the styles being applied to that particular element!
13. PageRAnk Status
Get your SEO statistics and analytics quickly with this cool plugin for Chrome. This tool will not only show you your Google Page Rank, but will even cater to Alexa services as well. You also get additional information about the amount of traffic, indexed pages, socials, Whois, IP locations, and even the web page info in full details.
14. Subtle Patterns Preview
Love the free but beautiful patterns provided by Subtle Patterns (www.subtlepatterns.com)? Then this extension will allow you to simply select a CSS selector, and apply a pattern easily without the hassles of downloading, switching windows, and tweaking the style sheets. If you have already selected a pattern, remember the name and download it from the main site.
15. Pixlr Editor
Opening your favourite photo-editing software can be unproductive at times; how about a browser-based one? The Pixlr Editor of Chrome is a fast and easy-to-use photo-editing app that runs fully on browser. Though its features may not really be professionally extensive, manipulating and editing photos and images from scratch can be nevertheless effective. Now, you don’t need to pay for anything else here because it’s free.
Leave a Reply