These days, it seems like a new tutorial appears every minute, but personally I believe that looking at actual implemented solutions is still a powerful way to learn, and you also have many tools and methods at your disposal which can help you see and figure out how your favourite websites were built. Everything you need to know and learn is right in front of you and at your disposal.

Web Development Tools and Extensions

The traditional view source code option was not enough for a good code inspection. It became very important for a web developer to have a toolbox that could provide him with a set of possibilities specifically made for code analysis and inspection within a web browser. Those tools are called Developer Tools and are usually installed by default or as an extension/plugin, working directly from the browser itself. With the developer tools you can see all the source code of a webpage as you did before with the traditional View Source Code option, but with way more options and functionality than before. You can inspect, edit, watch live results and much more.

Google Chrome (Developer Tools) / Safari (Developer Tools)

You may be wondering why am I including Chrome Developer Tools and Safari Developer Tools together, well that’s because they belong together. The Developer Tools is part of the Webkit open source project which means Safari and Google Chrome share the same code base, they even share the same layout.

So let’s start with Chrome, my new favourite. Google Chrome’s Developer Tools  is very recent compared with others like Firebug (Firefox), but it’s growing fast and getting better and better with each new version.

The same obviously applies to Safari.

“The Google Chrome Developer Tools provide an integrated environment for debugging, optimizing, and understanding a web application, or website, running in Google Chrome. The developer tools are developed partly through the WebKit open source project, where the tools are called Web Inspector.”

“All of Safari’s powerful developer tools are easily accessible from the Develop menu. The Develop menu contains a wealth of tools that you can use for web page manipulation and debugging.”

For a better understanding, you can check the links below.

Google Chrome Developer Tools

Safari Developer Tools

Firefox (Firebug)

With Firefox the smart solution for a web developer is definitely Firebug, one of the most popular Firefox extensions out there. Although the Webkit Developer Tools is growing at a really fast pace, Firebug is probably the most complete and mature tool you can have for web development and code analysis.

“Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.”

Firebug‘s interface and work process is extremely similar to Chrome’s Developer Tools (or vice-versa).

Firebug

Opera (Opera DragonFly)

This is Opera’s gem for code analysis and inspection. It’s surprisingly powerful and personally I would put it in third place right behind Google Chrome’s Developer Tools. The downside is definitely the aesthetics but its features and cross-device compatibility places Dragonfly among the best.

“A full suite of tools are ready at your disposal. Debug JavaScript, view the DOM, monitor network traffic, preview resources, edit colors and a whole lot more. If you are a developer, or a designer, Opera Dragonfly has the tools to keep you covered.”

For more information, check the link below.

Opera Dragonly

Internet Explorer (Developer Tools)

Yes, Internet Explorer has one too. Although the interface looks a bit old and not as good as other solutions since it lacks some functionality, it can be almost as good as the competition.

“The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages.”

You can learn more about it at the link below.

Internet Explorer Developer Toolbar

How To

Check a website font

With real text (not an image of text), the first and easiest way is by using Developer Tools / Firebug, so if you have it just select the text, inspect element and you should immediately see on the right side the font or font-family property which tells you the font that’s being used. Another way to do it is by using an extension/plugin for this purpose. There are probably similar plugins for other browsers like Chrome, but if you’re using Firefox, you have a great add-on called Context Font. With Context Font all you need to do is select the text (again, needs to be real text and not an image), right-click on it and you will immediately get the font and size used.

If the font you’re looking for is being used as an image, you have only one way to do it. One of the many places you can do this is myfonts.com. Upload your font and follow the steps.

Good luck!

Check the box model of an element

The box model represents the visual structure of the elements of a webpage using the corresponding properties like width, height, margin, padding and border, according to the visual formatting model. It’s possible to check the box model of any page and element using Developer Tools or Firebug. In order to do that, you just need to inspect the desired element and select Metrics on the right side of the Developer Tools panel. With Firebug, you need to select Layout (not Metrics).

Copy all text content of an element with Developer Tools

This one is a popular trick which is achieved by using the Developer Tools console. So let’s say you would like to copy this article’s text without the need of having to select all the content with your cursor (particularly useful on very long pages with too much text). To do that, inspect any element on this article page and look for the text container’s name from which you would like to copy the text (which in this case is called articlesContainer), now go to the console option and write the following command: copy ( articlesContainer.innerText ). Now paste the text anywhere you want and you are done! You’ve just copied the text inside our articlesContainer which corresponds to our main article text.

Bookmarklets

Min

MIN is a bookmarklet that will strip any decoration from a site. All color, borders and backgrounds are removed instantly, helping you identify the successful and unsuccessful uses of typography and layout.

Website

Design

Design is a suite of web-design and development assistive tools which can be utilized on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.

Website

Favelet Suite

When invoked, a div element will appear in the top left corner of your browser window with a list of all the favelets included. Simply click the link you want to invoke the favelet. An “info” icon is available to take you to the favelets information page on slayeroffice. Included in the suite: Color List, Document Tree Chart*, HTML Attribute Viewer, HTTP Header Viewer, Hidden Field, Modifier, JavaScript Object Tree*, MODIv2, Mouseover DOM, Inspector, Object Dimensions, Page Info, Remove Children, Resize Fonts, Ruler**, Show Source, Style Sheet Tweak*, Style Sheet Viewer*.

Website

W3C Markup Validators

Quick markup validations of any web document.

Website

Today we are featuring helpful extensions especially for bloggers, which can make blogging a really fun and pleasing experience.

1. Zemanta

Using Zemanta, you can enhance your blogging experience and make it fun. It expands regular blogging dashboard giving you content suggestion about the text you are writing, images, links, articles and tags in a simple interface located in the sidebar. It supports WordPress, Blogger, Typepad and other popular publishing platforms. It has a spam-free database of 10,000 news sources and blogs; it will filter the copyright images before suggesting them to you.

Its main information sources are:

• For Links: Wikipedia, IMDB, Amazon etc
• For Videos: Youtube
• For Images: Flickr, Getty
• For Articles: BBC, CNN and thousands of blogs.

2. Google Reader Notifier

Feeds are very important part of life for any blogger, if you want to remain updated with the world easily then you should use Feeds feature of any website or blog. Google Reader is a very popular Feed reader. If you use Google Reader and love fast feeds then this extension is for you. It displays the Google Reader unread feeds count on a small icon next to your URL bar. Clicking the icon shows a preview of your reading list in a pop-up. If you want to open Reader in new tab then you can configure it from the options page.

3. Untiny

There are lots of people like me who are always afraid to open a shortened link, scared of any virus attack, but we can overcome this problem by using this extension. You just have to enter the shortened link and press the extract button, original link will be displayed.

4. WiseStamp

Signatures in any email are very important for bloggers for contacting with fellow bloggers because it looks professional. This extension allows you to create multiple signatures which can be selected as used in Gmail. It will add IM and Social Profiles like Facebook, Twitter and more below your sign.

5. DayHiker

DayHiker is a Google Chrome extension for Google Calendar. It displays schedules and tasks in a toolbar from your Google Calendar. It is a small but useful extension to manage your schedule and tasks. It has countdown and reminder badges with alarm clock which will help to manage your time effectively.

6. TPGoogleReader

Installing this extension is much recommended if you are feed geek. Using this extension you can work with feeds with leisure. It will help you in both reading and subscribing the feeds. When a website has a new feed, the icon of this extension will turn green to orange, click it to open a popup menu to see the list of feeds available on that page then click anyone of them to read it in Google Reader. It can show the number to unread items still in your Google Reader account. You can configure its Icon click, double-click and triple click actions from the option menu.

7. Split Screen

Some time your monitor screen become small in front of your work load. This extension allows you to overcome this obstacle and splits the browser in two parts; each one can open a different webpage. You can enjoy browsing two websites at the same time by using this epic extension giving to dual view in your browser.

8. Chrome Chikitizer

Well URL shortening has become very famous since last some years and there are many sites providing this service. This Google Chrome extension named “Chrome Chikitizer” dose the same task effectively and directly from your chrome browser.

9. Shareholic

It is a saying: “Sharing is Caring”. So every blogger should share the useful knowledge he/she has or amazingly informative web pages with his/her colleague and friends. The easy ways to do so is to install this extension. It is the easiest way to share interesting web pages using Facebook, Twitter, Email, Gmail, Bookmarks and many more. You can choose from 100+ supported services which can be configured from option menu.

10. Drop.io

Most of you people may be familiar with the drop.io service, which assists you to get images, movies or documents from WebPages. This extension uses drop.io and allows you to create drops as well as scrape all media of all kind off of any website and throw it into drop. For example if you are browsing Google Images and you click Drop All Images, this extension will upload all the images to your drop and access then easily in future. You can customize whether the extension always create a new drop or you can set a single default drop for it to be used always.

11. Google Images Large Images

Tired of using Google Images with a very small preview images? Use “Google Images Large Images” extension to over-come this obstacle while browsing Google Images. It will show the actual image size on mouse over which will help you to determine the original beauty of that specific image.

12. Chromed Bird

Although there are many Twitter extensions for Google Chrome but Chromed Bird is the most powerful I have used till now with many features. Using this extension you can use tweet anytime without visiting twitter.com, you can add/remove timeline tabs, create custom search queries that will be updates automatically, preview image links by hovering them. Many more important features are also present in this extension to make your tweeting experience more fast and interactive.

13. TwitterBar

TwitterBar is a Google Chrome Toolbar which enables you to tweet directly from the current page you are going through. The Page’s Title and URL are automatically entered into the textbox, it also use an auto URL-shortener which can be changed as per your requirements from the Options button on the page locating extensions.

14. SEO Status Pagerank/Alexa Toolbar

For regular bloggers it is very important to monitor the SEO status of any blog or website of his/her interest. He/she will know the performance and ranking of the websites of his interest in the eyes of Alexa and Google. The SEO status toolbar is a simple, light-weight and very fast facility of checking Google Pagerank and Alexa Rank for any website or its every page. One other advantage of using this toolbar is that, it will increase the Alexa Rank for the sites you visit just like IE toolbar does.

It don’t rely on any third-party website to collect information, it take the data directly from Google and Alexa hence providing accurate and reliable SEO status of any website.

15. AddThis

AddThis is the most popular bookmarking and sharing service around the globe. Using this extension you can share a webpage or an article to more than 200 website which includes Facebook, Twitter, WordPress etc. You can email the current page to any of your friend or family member using this extension; it also provides Print option which enables you to print the page you are currently viewing and you can also translate pages in different languages.

16. Image Cropper

Image cropper extension allows to crop images from any website. It can crop images in img HTML element, CSS background images for any HTML element and images in PNG format. Important point is, you cannot take screenshot of a webpage or crop it according to your desire, it can crop images present on web pages only.

17. Facebook Notification Checker

Facebook notifications help you to interact with your fellow bloggers and friends with ease. This extension is developed to make it easier for you, once you have a new Facebook notification this extension will tell you via a red notification icon. Support is also added for notifying for new messages and friend requests.

18. Google Dictionary (by Google)

Not everyone can master any language even it is his/her mother language. So there is always a need of a dictionary, and how good that will be if you have a dictionary in the same page which you are reading. Now this is possible if you are using Google Chrome, by installing this extension you can get meaning or definition of any word in a small pop-up bubble just by double clicking it.

This extension also offers a address bar dictionary from which you can view complete definition of any word. It supports many international languages like French, German, Spanish and more. But note that, it is a dictionary not a translator; i.e. if you are trying to find meaning of a Dutch word in English, it wont happen.

19. RemindMe

Every one hate to miss some important task, I presume so that you. So better set reminders about the tasks and chores to be done in future. This Google Chrome Extension allows you to setup reminder while you are browsing. Remind yourself of online work to be done later or remind yourself of the jobs you need to complete on a specific time. You can also sync the reminders between your different computers using Chrome built-in “Synchronize My Bookmarks” function.

20. Ibrii

Ibrii is a very amazing tool to snip every type of content like images, videos, text from any website. One big advantage of this service is that, it provide the facility to share distinct and trenchant elements unlike other service by the use of which, you can only share the whole web page on Twitter or Facebook. Users have the facility to create permalinks which can be later used or shared on instant messaging or on other social networking sites.

21. Chrome Editor

Coding is a very crucial and significant part of a blogger, people find it difficult to switch between the browser and code editor so this extension is made which allows you to code right within the your browser. I can locally save a code reference for later use on your computer. It has some predefined basic codes like HTML 4 DTD, HTML 5 DTD, CSS and jQuery Functions.

22. Digg for Chrome

This official Digg extension makes digging easy and fast. You can Digg directly from your browser, it views Digg count for any URL which is displayed in the right of the browser’s address bar. As Digg is one of the largest source to find information of your interest, this extension has a random button that allows you to discover new content from the web.

23. WordPress Comment Notifier

This extension will check for pending comments on your WordPress blog and displays it as a badge. You can unapproved, Trash, Reply to or mark as spam without opening a new tab. This extension is very handy for bloggers owing more than 1 blog as it can add multiple blogs.

24. ChromePass

ChromePass is a small password recovery tool that allows you to view the user names and passwords which are stored by Google Chrome browser. It will show Origin URL, Action URL, User name and Passwords as well as their fields and the time at which they were created.

Any thing missing or any suggestion? Feel free to inform us about your thoughts in comments :) .

I have a friend who suggested to try Chrome again and I thought I will give it a try – now I will check how much and how good extensions Chrome has and is it enough to transfer now???

This article will try to answer to question – can designer, web developer, social marketing, SEO person actually transfer to Chrome without any loss of extension features. Are there something similar to FireBug, WebDeveloper, Color Picker, SEO For Firefox, Alexa ranks, debugging tools, which can be replaced to be used daily?

Let’s put Chrome on test – shall we?

If you know a little about Google Chrome read our previous article about this browser features – Google Chrome Review.

Chrome Extensions For Daily Browsing

1. Aviary Screen Capture

Take a screen capture of the visible portion of any web page and it will open in an editor where you can crop it, add text and arrow markup, get color information or move around areas. You can easily save it to your desktop or host it online. The extension also lets you quick launch any of Aviary’s web editor design apps. View extension screenshots by clicking on the thumbnail and using the arrow keys.

2. Xmarks Bookmarks Sync

Backup and sync your bookmarks across computers and browsers. Xmarks is also available for Firefox, Safari and IE.

Since I am working on one computer at work and laptop, I love this automatic tool syncing my bookmarks  and allowing me to worry about other things.

3. AdThwart

Block ads on websites. Supports EasyList and many other ad blocker filter lists.

4. Evernote Web Clipper

Evernote’s Web Clipper extension let you save interesting stuff you see on the web.

5. LastPass

LastPass is a free online password manager and Form Filler that makes your web browsing easier and more secure.

6. RSS Subscription

This extension auto-detects RSS feeds on the page you are reading and upon finding one will display an RSS icon in the Omnibox, allowing you to click on it to preview the feed content and subscribe. Very handy extension for daily blog browsing.

7. Chrome Gestures

Allows you to execute common commands (like page forward/backward, close tab, new tab) by mouse gestures drawn over the current webpage, without reaching for the toolbar or the keyboard.

If you don’t know how mouse gestures work, check out this video.

8. Google Similar Pages beta (by Google)

Discover webpages similar to the page you’re currently browsing. I understand this extension works similar like StumbleUpon, but it’s more objective because it’s based on Google search engine and it’s been released by Google – cannot be bad!

Here I tested it on my own website and got 4 very popular design blogs displayed – first test looks good, I am trying it more definitely.

9. Feedly

A magazine-like startpage. A fast and stylish way to read and share the content of your favorite sites and services. Provides seamless integration with Google Reader, Twitter, Delicious, YouTube and Amazon.

10. Delicious Chrome Extension

Very simple and clean Delicious extension allowing you to simply bookmark page to Delicious. This extension adds just one button, without whole bookmark bar, I loved it!

11. Google Quick Scroll

Google Quick Scroll is a browser extension that helps you find what you are searching for faster.  After you click on a Google search result, Quick Scroll may appear on the bottom-right corner of the page, showing one or more bits of text from the page that are relevant to your query. Clicking on the text will take you to that part of the page.

Chrome Extensions For Social Networking

12. Google Mail Checker

Displays the number of unread messages in your Google Mail inbox. You can also click the button to open your inbox, very handy tool for daily browsing.

13. Chromed Bird

Chromed Bird is a Twitter extension that allows you to follow your timelines and interact with your Twitter account.

14. Facebook for Google Chrome

Extension which lets you read your Facebook news feed and wall. You can also post status updates.

15. StumbleUpon Extension

Simple StumbleUpon toolbar for Chrome, you should be very familiar with it if you are stumbling daily.

16. goo.gl url shortener

goo.gl url shortener is an extension which allows you to shorten the current website URL with the new Google URL Shortener service http://goo.gl/.

Chrome Extensions For Web Designers, SEO specialists and Web Developers

17. Lorem Ipsum Generator

Many other extensions of this type – in other browsers – simply complicate this task, using really extensive code, XHR, etc. The main purpose of this one, is to use the less amount of code (and also memory) and help the developer/user to get the job done.

Great and simple classic Lipsum extension, required in every designer’s toolbar.

18. Firebug Lite

Firebug Lite is a tool for web developers, that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

19. META SEO inspector

A Google Chrome extension useful to inspect the meta data found inside web pages, usually not visible while browsing.

20. Pastebin

Post and coloring source code (C, Python, Ruby, HTML, CSS, …) on a pastebin service. Although useful for the share on the forums, IRC or social networks (like Twitter).

21. Speed Tracer (by Google)

Get insight into the performance of your web applications.

22. Resolution Test

An extension for developers to test web pages in different screen resolutions, with an option to define your own resolutions.

23. Copy Without Formatting

Provides various ways (customizable keyboard shortcut, floating button, or auto-copy) to copy your selection WITHOUT formatting.

24. IE Tab

Use Internet Explorer to display web pages in a Chrome tab. Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome. Great for web developers who want to test the IE rendering engine, users who use sites with ActiveX controls, and users who want to use the explorer view for local files (i.e. file:// URLs).

25. Chrome SEO

I couldn’t live without great SEO tool, where I could see stats of current page I am visiting, this tool is under development still, but already it’s very lightweighted, fast and working just excellent.

“The Google Chrome SEO extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks and other daily SEO tasks.”

26. PageRank

Very simple and light extension which only task is to display pagerank automatically while page loads. For advanced browsing I would use Chrome SEO, but for automatic,fast stats display I like this plugin in my Chrome Extensions as well!

27. SitezMeter

SitezMeter displays traffic charts from Google Trends, Alexa and Compete side by side, as well as ranks. This extension is a handy tool to webmaster, web site owner and SEO/SEM specialists.

Of course, you can go to SitezMeter website directly, but this helps sometimes to do it faster in handy way, anyway – your pick!

28. Chrome Flags

Chrome Flags displays a country flag indicating about the physical location of the websites you’re visiting. The extension also provides access to detailed information regarding the website’s servers, owners, traffic and trustworthiness.

29. Eye Dropper

Eye Dropper and Color Picker extension which allows you to pick color from any webpage or from advanced color picker. You can also check option, that selected color HEX code will be automatically copied to clipboard. This tool is even more handier than ColorPicker on FireFox, because HEX code I needed to copy/paste manually.

30. MeasureIt!

Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

Yes, this popular Firefox extension for designers is available on Chrome as well! Great!

31. Pendule

Built in features for developers

I didn’t know there are already built in features for web developers, but wow, there is – and you don’t need to install anything.

This “Inspect Element” feature works similar like Firebug, but it has different features. Just select and element, text you are interested in, click right mouse button and check inspect element – you will get advanced and precise results right away! Very, very handy!

Read more about built-in features for developers in this google guide.

Summary

While testing all those different extensions, what I enjoyed the most – extensions are super easy and extremely fast to install/uninstall/activate. I was used to Firefox restart browser statement all the time, I never really thought about it. With Google Chrome you just click on install button and extension is live and working in seconds without any slow downloading or restarting, lagging. And in the same time, if I decided not to keep that extension, I could easily uninstall it as well without any problems.

I am amazed, it took me so long to try Chrome extensions, because I thought there could be nothing better then Firefox, all those thousands of plugins it has and there no way Chrome could compete with something like that EVER.

Dear readers, I was very wrong – of course, there aren’t so many extensions available just yet, but already all of them works way better, way faster and for now I haven’t got any problems with Chrome at all – just big, positive surprises.

For designers and developers I would suggest to give Chrome a try and check out design related extensions, there are already. They aren’t so much but already very handy and fast to use, which usually wasn’t the case with Firefox however.

Huh..but for daily browsing, tweeting, stumbling, mail management, blog writing ( yes, I mean all bloggers) – I suggest to switch to Chrome today and give it a chance. Try it for 3-4 days, install several your favorite extensions from this list and I am pretty sure, you will not want to go back to Firefox for daily browsing. Just my personal opinion, but I was very strong Firefox lover until yesterday, so there must be something good with this new browser I think :)

Let me know about your pros,cons and experiences with Chrome comparing it to Firefox! Let’s go to browsing!

You can download latest Chrome version here, but you need to install Google chrome BETA version in order to use and try extensions as well – get it here.