WEBSITE
May 30, 2018
10 CHROME EXTENSIONS FOR WEB DESIGNERS
10 CHROME EXTENSIONS FOR WEB DESIGNERS
Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.
An extension must fulfill a single purpose that is narrowly defined and easy to understand. A single extension can include multiple components and a range of functionality, as long as everything contributes towards a common purpose.
User interfaces should be minimal and have intent. They can range from a simple icon, such as the Google Mail Checker extension shown on the right, to overriding an entire page.
Extension files are zipped into a single
.crx
package that the user downloads and installs. This means extensions do not depend on content from the web, unlike ordinary web apps.
Extensions are distributed through the Chrome Developer Dashboard and published to the Chrome Web Store. For more information, see the store developer documentation.
Here the 15 chrome extensions you must have a web developer
1. Web Developer
The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox.
View in Chrome Web Store
View in Chrome Web Store
Eye Dropper is extension for Google Chrome and Chromium. It allows you to pick color from any webpage or from advanced color picker. It is great tool for web developers.
View in Chrome Web Store
View in Chrome Web Store
View in Chrome Web Store
Page Ruler lets your draw out a ruler to any page and displays the width, height and position of it.
Drag the edges of the ruler to resize it.
Use the arrow keys to move and resize the ruler Show guides extending from the ruler edges.
Manually update the size and position of the ruler from the toolbar to make precision changes.
View in Chrome Web Store
The Keywords Everywhere extension is a free keyword research tool that shows you useful google keyword search volume and cost per click data on multiple websites. This tool saves you the hassle of copying data from various websites and using the google adwords keyword planner to see relevant search volume and cpc data.
View in Chrome Web Store
View in Chrome Web Store
2. Stylebot
Stylebot allows you to quickly manipulate the appearance of any website (using custom CSS). You pick an element and choose any changes you want to make from the editor. You can change the font size, color, margins, visibility and a lot more. The advanced users can also write the CSS manually. Using Stylebot, you can personalize the look and feel of your favorite websites. It is also a great tool to learn CSS and for debugging your own site's design.
View in Chrome Web Store
3. Eye Dropper
Eye Dropper is open source extension which allows you to pick colors from web pages, color picker and your personal color history.Eye Dropper is extension for Google Chrome and Chromium. It allows you to pick color from any webpage or from advanced color picker. It is great tool for web developers.
View in Chrome Web Store
4. Firebug Lite for Google Chrome™
Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.View in Chrome Web Store
5. Window Re-sizer for Developer
The Window Resizer extension lets you resize your browser window on the fly. Clicking on the icon in the menu bar produces a drop down menu of window sizes which you can customize. What’s neat about the Window Resizer is that it offers an option to launch it as pop-up, enabling you to switch through different screen resolutions and see if your media breakpoints are working as expected. On top of that, you can also rotate your screen and customize the presets.View in Chrome Web Store
6. Page Ruler
Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.Page Ruler lets your draw out a ruler to any page and displays the width, height and position of it.
Drag the edges of the ruler to resize it.
Use the arrow keys to move and resize the ruler Show guides extending from the ruler edges.
Manually update the size and position of the ruler from the toolbar to make precision changes.
View in Chrome Web Store
View in Chrome Web Store
7. WhatFont
What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant. It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.View in Chrome Web Store
8. Code Cola
Code Cola is a chrome extension for editing online pages' css style visually.View in Chrome Web Store
9. Keywords Everywhere - Keyword Tool
Free Keyword search volume for 15+ websites like Google Analytics, Google Search Console, Moz, Majestic, YouTube, Amazon & moreThe Keywords Everywhere extension is a free keyword research tool that shows you useful google keyword search volume and cost per click data on multiple websites. This tool saves you the hassle of copying data from various websites and using the google adwords keyword planner to see relevant search volume and cpc data.
View in Chrome Web Store
10. SEO SERP
A simple tool to quickly check the position of a list of sites given a keyword.For example, on the sample image you can see Wikipedia ranking #1 and Amazon ranking #77 for the keyword "lcd".
View in Chrome Web Store