Recognize Fonts With "WhatFont."
As a web designer and developer, you hang around on other websites now and then to get inspired. If for example, you found a font on a website that you'd like to use yourself, the extension "WhatFont
" can help you.
[caption id="attachment_77105" align="alignnone" width="640"]
Instead of searching the font name in the stylesheets, you can just hover over the respective text with the mouse when using "WhatFont". A small tooltip tells you the name of the used font. Via click on the text, additional information is given out, like font size and color.
Picking Up Colors Using "Eye Dropper."
Colors can be recognized in a similar way to fonts. To get the exact color from a website, you need to copy it from the stylesheet. If you want to grab a color from a picture, all you can do is take a screenshot to copy it into your image editor.
[caption id="attachment_77103" align="alignnone" width="640"]
" makes all of that redundant. The extension provides a pipette that allows you to pick up a color from a website. While doing that, "Eye Dropper" doesn't restrict itself to elements that have had a color assigned to them via CSS. You are also able to get a color value from an image.
The color is given out as hexadecimal, RGB, and HSL value, including proper CSS labeling.
Deactivating Cookies With "Disable Cookies."
For that, you usually need to dive into the settings. The detour is rather complicated just to test how a website reacts to deactivated cookies.
The extension "Disable Cookies
" now allows you to easily enable and disable cookies for a website via a button in the toolbar.
Measuring Distances and Sizes Using "Page Ruler" and "Dimensions."
Are all elements on your website placed correctly? Are all the distances and sizes right? The following extensions
help you measure your site.
[caption id="attachment_77104" align="alignnone" width="640"]
The "Page Ruler
" can be used to place a rectangle on a website either manually, or by entering numeric values. Here, the distances to all four page borders, as well as the rectangle's width and height are displayed.
[caption id="attachment_77102" align="alignnone" width="640"]
An alternative is the extension "Dimensions
". This one measures the distances between two adjacent elements on its own. To make it do that, just place the mouse pointer between the respective elements. Two lines show you which distance is measured. It always measures the vertical and horizontal distance to adjacent elements.
Automatically Refresh a Page After Changes With "LivePage."
The extension "LivePage
" takes the task of frequent manual refreshing off of you. Whenever a resource, like a CSS file, was changed on the server, the extension automatically refreshes the page.
Creating Screenshots Using "Awesome Screenshot."
[caption id="attachment_77106" align="alignnone" width="640"]
Whether it's for the presentation in your portfolio or for a client: website screenshots are always necessary. "Awesome Screenshot
" allows you to take screenshots with one click. Here, only the content of the current tab is included.
Additionally, you also get to decide whether you want a screenshot of the visible area in the browser, or the entire website. It is also possible to take a complete screenshot of long, scrollable pages.
It’s funny because Firefox users do not need an add-on to take screenshots anymore. First you press shift+f2 to open a console line at the bottom of the browser, and then you type “screenshot –fullpage” plus, optionally, the desired file name. Give it a try.
We weren’t familiar with ‘Page Ruler’, which is a very useful tool. Thank you for sharing! :)
Wow, I saw there much more useful extensions for everyone including developers. Thank you for sharing, I already forgot that extensions in browsers could be very useful.
Great post, just thought that I’d mention that a great alternative to awesome screenshot – if you’re on chrome and looking to take a screenshot of the full site, would be fireshot.