If you are a web developer, there are tools for your browser that will help you with certain situations. For example, if you run across a webpage that has a certain color you would like to use, you could use a color picker to get that exact information. Another example is seeing the rank of a certain website. There are also tools for that. These tools are known as extensions and in this guide, we will take a look at five developer tool extensions for Chrome.
MeasureIt
The first developer tool in this guide is the MeasureIt extension. This extension will let you measure any where on any webpage to get the correct pixel size. For example, if you wanted to measure a section of a webpage that you wanted to add an image to, you could draw a square or rectangle on the space and get the exact size in pixels. To install this extension, you can use the download link below. Then click the Install button on the page and follow the steps to install it. You will more than likely need to restart Chrome to begin using this tool.
Download Link: MeasureIt
Screen Capture (by Google)
Up next in this list is the Screen Capture extension. As you probably have already guessed, this is a screen capture tool. This extension can be installed by using the download link below. Once installed, you can begin using the extension to capture different parts of your screen. You can even capture the screen while it is scrolling. Any screenshot you take using this extension will be saved as a png file and from there you can edit it and save it in the format of your choice.
Download Link: Screen Capture (by Google)
Eye Dropper
The Eye Dropper is the next developer tool extension for Chrome we will take a look at. This is a color picker that will allow you to pick colors from any webpage. There are many options with this extensions that you can manage. You can also create keyboard shortcuts for this extension that will let you quickly navigate your way through the extension.
Download Link: Eye Dropper
SeoQuake
SEOQuake is an extension that will let you see many Google parameters on each site you visit. Some of the parameters you will see include Google PageRank, Google Index, Yahoo links, Yahoo linkdomain, Bing index and Alexa Rank. This is a great extension to have for any developer. Also, when you do a search on Google, you will see most of the information below or above each website. You can install this extension by using the link below and following the installation steps.
Download Link: SeoQuake
csscan
This is the last of our Chrome Developer Tools. This is the csscan extension which is very useful if you code with CSS. This extension will provide you with CSS properties for any element you mouse over on a webpage. After you install the tool, you will have to activate it by clicking the little button in the toolbar. Once you have activated it, you can then mouse over anything to see the properties.
Download Link: csscan