• Let’s Meet At Web Summit 2018! The P2H team is coming to the Web Summit 2018 that will take place in Lisbon on Nov… twitter.com/i/web/status/1…

COMPANY BLOG & NEWSROOM

21Jul

13 Google Chrome Extensions for Web Designers

According to NetApplications.com, Google Chrome has reached 7.24% of the world-wide browser market in June 2010 and is the third most popular web browser, behind Microsoft’s Internet Explorer and Mozilla’s Firefox. The data indicates that Chrome had more than 70 million active users in May 2010, which is up from 30 million in June 2009. Google Chrome has extensions that help add functionality to the browser, and there are tons for web designers to use for help in designing web sites. Here are 13 Google Chrome extensions that web designers should check out:

Firebug Lite

Firebug Lite is a great extension that allows you to view the HTML, CSS, or Javascript code of any web site.  A great feature of Firebug Lite is the ability to modify web site traits and behavior to preview how the changes would look before you actually implement them.  One neat trick is if you highlight a specific area of a web page that you are trying to figure out the code for, and then you right-click, you will see an option to Inspect Element. When you press it, you will be able to see the HTML/CSS/Javascript code for that element.

Chrome Editor

HTML editor that allows you to code right in Google Chrome. It also support jQuery and Flash. You can also debug your code right in the browser. Chrome Editor also has a syntax highlighter that you can turn on/off, so it’s easier for you to visually separate the different elements by color. When you are satisfied with your code, you can save it locally to your system. Another useful feature is that it support HTML5.

Aviary Screen Capture

Aviary Screen Capture allows you to get a screenshot of any web page. It opens up to the Aviary web applications. You can do many modifications (e.g. cropping, resizing, adding elements, etc.) like in desktop photo applications, like Adobe Photoshop. The great thing about Aviary Screen Capture is that it’s a full creative suite, so if the Screen Capture area doesn’t have all the functionality you need, it’s easy to switch to one of the other Aviary web applications.

Instant Image Editor

Instant Image Editor is similar to Aviary Screen Capture, except it gives you more options to manipulate your images in the Just press the Alt key when you right-click an image, and you are taken to the image editor screen. This is actually Pixlr, a popular web image editor application. In the image editing window, you will be able to manipulate the image in any way you want.

Eye Dropper

Allows you to get the HTML color code of any color from any web page. It also has its own color palette that you can choose from. It’s a very simple but useful Google Chrome extension.

Speed Tracer

Speed Tracer tests the speed of your web site and provides metrics. There is even reporting capabilities so that you can study the data in more detail. It’s a useful extension that will help you identify the speed issues with your web site, and help you increase its performance. If you run it, and nothing happens, then you might have to download the Google Chrome Developer channel version of Google Chrome, and add the following command line for it to work:

–enable-extension-timeline-api

Here are the instructions if you get stuck: https://code.google.com/webtoolkit/speedtracer/get-started.html

Chrome SEO

Chrome SEO is a Google Chrome extension that allows you to view the search-engine optimization information for that web page. It includes page indexed, backlinks, traffic, and other SEO information. There is also a keyword tool that will aid you in using keywords that will increase your web site’s traffic and ranking.

SEO & Website Analysis

While Chrome SEO provides a quick SEO analysis of a web page, SEO & Website Analysis is a more in-depth SEO analysis. One great feature is the color-coding for each SEO element. Additionally, it gives you tips on how to turn the red and yellow areas into green. You can export the data as a PDF. There is also a widget for the extension.

HTML5 Markup Detector

HTML5 markup detector allows you to quickly see if a web page is using HTML5 elements. If it is, a green icon will appear on the address bar. It’s a great way to check if your HTML5 code is being recognized because it checks if the doctype is for HTML5. However, it will only give you a green icon if the new elements of HTML5 are used as well.

MeasureIt!

MeasureIt! makes it easy for you to quickly find out the dimensions of any item on a web page. This is especially useful when you are using a template, and you are having a hard time figuring out what dimensions your images should be. I wish that I had known about this Google Chrome extension on a few occasions. It would have saved me many headaches.

Resolution Test

If you want to ensure that your web site will look on different screen resolutions, then Resolution Test is a useful Google Chrome extension. You can pick and choose what resolutions to view your web site, so you can see if it looks ok on different screens. You can also define your own screen resolution.

CSS Tester

CSS Tester allows web designers to test and preview different CSS codes on their web site without having to actually change the site’s CSS. It’s a great tool. If the developers found a way for you to export the code, and also for it to remain there when you leave the screen, it would be more useful.

Pendule

Pendule is a Google Chrome extension that provides web developer tools for Chrome. It provides a way for you to view the HTML and CSS code. Also, a way to validate the code on the web page. You can also check images, and it has its own eyedropper. There is also a way for you to enhance forms. It is definitely one of the most handy Google Chrome extensions for web developers.

1 comment

  1. Greg Babula Aug 05, 2010

    These are great, thanks! 🙂

leave a comment

All posts Back to top