RSS

6 Useful Google Extensions Or Apps For Web Developers

13 Sep

Web developers depend upon various tools to speed up their work. Google Chrome is now the most popular browser in the world. More than 50% logichacker visitors are using Google Chrome. The chrome extensions and apps listed here will help web developers and testers to speed up their work.

1. ColorZilla

Colorzilla is a tool that helps you analyze and choose the colors on a webpage.

Colorzilla Google Extension

Colorzilla Google Extension

 

Features

1. EyeDropper Tool
The 1st option on the colorzilla menu is the eyedropper tool. Take a webpage and position the cursor anywhere on the webpage to get the exact color code.

As shown in the image below, it shows the color code of the shade of red used in the google logo in a palette, when we position the cursor there . Just click on the area to save the color code to the clipboard. Similarly position your cursor correctly and get the color code of any pixel on the webpage.

Colorzilla Eyedroppertool

Colorzilla Eyedroppertool

2. Color picker
The 2nd option on the colorzilla menu is the colorpicker. It helps you get the hex code/rgb values for the color chosen from the color picker palette. In addition to that, it also provides you with the hsb values.

It provides an option to save your chosen shade into the history box which will show the recently saved colors. Also when you save the colors to clipboard using the eyedropper tool, it is automatically saved into the history box as well. In a later stage you can view the collection of colors that you have chosen through the picked color history option in the colorzilla menu.

Colorzilla Colorpicker

Colorzilla Colorpicker

3.Copy to Clipboard
This option copies the generated or sampled colors to the clipboard in CSS RGB, Hex and other formats. In addition to that, the settings provide you with an auto copy option that automatically saves the colorchosen to clipboard.

Colorzilla Copytoclipboard

Colorzilla Copytoclipboard

4. Webpage Color Analyser
This option displays the entire set of css colors(colors used in the style sheet of the page) of the current webpage in an analyser window as shown below.

Colorzilla Webcolor Analyser

Colorzilla Webcolor Analyser

On clicking any of those colors, it displays the details of the html elements used and the color code. It also highlights the exact areas where the corresponding color is used.

Colorzilla Webcolor Analyser

Colorzilla Webcolor Analyser

5. Palette Browser
Palette Browser comes with 7 pre-installed palettes which you can ideally use for your webpage.

Colorzilla Palette Browser

Colorzilla Palette Browser

6. Resample last location
Get the color of dynamic elements (hovered links etc.) by resampling the last sampled pixel.

7. CSS Gradient Generator
Click on this option and it redirects you to the colorzilla css gradient generator. Just adjust the stop panels, create the gradient which you can see in the preview tab and get the desired CSS gradient code for your stylesheet.

Colorzilla CSS Gradient Generator

Colorzilla CSS Gradient Generator

2. PHP Ninja Manual

You need not waste anymore of your time googling php function usages because the PHP Ninja Manual is a hassle free documentation lookup for PHP. This google extension provides PHP 5.4 documentation in 8 languages. An extension available right in your browser which any php developer will love to have.

This is how it works:
Just type in the function name whose details you want, in the search bar of the extension and the details will be listed as shown below (here I have typed in ereg_replace function):

PHP Ninja Manual

PHP Ninja Manual

 

If you want code examples of the same function just click on ‘show code examples’ link and get the code samples as shown below:

PHP Ninja Manual

PHP Ninja Manual

3. Responsi

This is a google app that helps you do testing for responsive web designs. We just have to input the url of the site and choose a size (resolution) from the sizes given.

Features

  1. It gives you a drag to resize viewport option.(The size to which you drag will be shown dynamically in the sizes menu)
  2. It also provides a rotate option to see website in landscape or portrait mode.

Responsi

Responsi

4. Screen Resolution Tester

This is a google extension that helps you view your website in different screen resolutions by resizing the browser window from a pre-defined list of screen resolutions. It includes the resolutions of ipad, iphone and android devices as shown below. Hence it helps in responsive web designing.

Screen Resolution Tester

Screen Resolution Tester

Also you can enter a custom screen resolution and the browser will resize to that resolution. The following image shows the cube3x page resized to iphone resolution.

Screen Resolution Tester

Screen Resolution Tester

5. Fast String

This is a google app that can perform encoding, decoding, hashing and several string operations. An added advantage is that it can work offline. Let us take its functionalities one by one:

a) Fast string Convertions
As shown in the image below it performs the following conversions.

Faststring Convert

Faststring Convert

 

b) Fast string hashes
As shown in the image below it performs the following hashes.

Faststring Hash

Faststring Hash

 

c) Fast string web functions
As shown in the image below it performs the following web functions.

Faststring Web

Faststring Web

 

Here in the screenshot below, I have perfomed a url encode function using fast string.

Faststring Urlencode

Faststring Urlencode

 

d) String operations
As shown in the image below it performs the following string operations.

Faststring Strings

Faststring Strings

 

Here is a lorem ipsum generator of fast string

Faststring Lorem Ipsum

Faststring Lorem Ipsum

6. Click&Clean

Click and clean is a google extension that helps us clean the tracks of our internet activity like delete typed URLs, Cache, Cookies, our download and browsing history in just one click.

Here are some of its main features:

  • Clears the cache and deletes all cookies
  • Removes browsing history
  • Removes download history
  • Quick access to system tool
  • Remove flash cookies

The following image shows an overview of the main activities of click and clean on your system and browser.

Clean Main

Clean Main

 

This image is an overview of the chrome activities of click and clean.

Clear Chrome

Clear Chrome

This image is an overview of the system activities of click and clean. It provides easy access to system tools.

Clean System

 
1 Comment

Posted by on September 13, 2013 in Web

 

One response to “6 Useful Google Extensions Or Apps For Web Developers

  1. Pingback: Homepage

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: