• About
  • Services
  • Portfolio
  • Raves
  • Blog
  • Contact

Brand Glow Up

15 best google chrome plugins for designers and developers

BY Pauline Cabrera · Leave a Comment

FacebookTweetPin

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

FirebugLite

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

WhatFontCrome

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

ResponsiveTester

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!

MeasureltCrome

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

WebDeveloper

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

ResolutionTest

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

ColorPicker09

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

TechProfiler

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

CSSShackCrome

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

CodevCrome

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

SpeedTracer

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

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

PageRankStatus

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

SubtlePatternsPre

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

PixlrEditor

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.

FacebookTweetPin

Filed Under: Website Tools · Tagged With: google chrome, tools, web design, web designer

About Pauline Cabrera

While I am kind of a jill-of-all-trades in the creative industry, I specialize in WordPress web design & front-end development. I've been in the digital marketing & web design scene for 14 years, plus over 5 years in the event design business. Many of my peers call me a passionate perfectionist. Hmm, I think you should try working with me and see? ;-)

Previous Post: « 4 best color palette tools & generators
Next Post: 18+ free css button generators »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Stay Connected

  • Facebook
  • Instagram
  • Pinterest
  • Twitter

Featured Posts

50+ Awesome Tools I Use To Run A Kick-Ass Blog

How to Create An Effective Website For Your Small Business

32 Creative Types Of Blog Posts You Can Write About

100+ Blog Post Title Templates That Grab Attention

20 Content Upgrades That Will Skyrocket Your Email List

20+ Places To Find Superb Content To Share On Social Media

9 Different Ways To Make Money Blogging

5 Beneficial Reasons Why Your Business Needs SEO

5 Creative Ways To Make Money On Instagram

Beginners Guide: How To Get Traffic To Your Blog

100+ Catchy Opt-In Headline Ideas To Get More Email Subscribers

9 Juicy Pinterest Tools: How I Get 30k Website Visits A Month From Pinterest

Social Media Cover Photo Dimensions That Work (2020 Edition)

20+ Must-Have Tools For Savvy Social Media Managers In 2020

20 Juicy Tips To Increase Your Sales On Etsy

6 Google Adsense Alternatives To Make More Money Online

12 Effective Formulas To Grow Your Email Subscribers Faster

10 Best Branding & Web Design Companies for Female Entrepreneurs (Toronto & Canada)

Boxxed: 24 Free Flat Social Media Icons

13 Benefits Of Blogging For Your Business

More Featured Posts

Recent Posts

  • 25 Best Experiential Marketing Agencies in Toronto
  • 10 Best Real Estate Agents Around Vaughan, Ontario
  • 10 Best Small Business Consulting Companies in Toronto (Ontario)
  • 10 Best Hospitality Business Consulting Companies in Toronto (Ontario)
  • 5 Best Professional Headshot Photographers in Toronto & GTA (Ontario)
  • 10 Best Experiential Marketing Agencies in Toronto (Ontario)
  • 10 Best Social Media Marketing Agencies in Toronto (Serving Canada)
  • 10 Best Luxury Web Design Companies in Toronto (Serving Canada)
  • 10 Best Branding & Web Design for Real Estate & Broker Agents in Toronto
  • 10 Best Branding & Web Design for Business Consultants in Toronto
  • Why You Need Linking Building For Your Website
  • 4 Profitable Ideas For Your Next Ecommerce Store
  • 100+ Yummy Domain Name Ideas for Food Bloggers
  • 21 Seriously Annoying Blog Design Mistakes You Need To Fix Right Now
  • 100+ Awesome Domain Name Ideas for Mom Websites

Categories

  • Blogging Tips
  • Content Marketing
  • Email Marketing
  • Graphic Design
  • Business Tips
  • Making Money Online
  • Reviews
  • SEO
  • Social Media Marketing
  • Tutorials
  • Uncategorized

Search

  • Email
  • Facebook
  • Instagram
  • Pinterest
  • Twitter

Home · About · Privacy · Contact

© 2021 BRAND GLOW UP · Formerly Known as TwelveSkip

Toronto Web Design & Printing Company · Based In Toronto · Serving Worldwide

1230 Sheppard Ave W #4, Toronto, ON M3K1Z9