Useful Browser Tools for Web Designers and Developers:

By Shan Balasuriya Posted Date: 2014-04-17

Browser tools for web designers

Web Browsers are one of the most used pieces of software, especially amongst the web design & development community. We have a variety of browsers now available to us and these browsers now have a large number of extensions, plug-ins and add-ons. These extensions are usually developed by the users themselves to help improve the browser experience as well as increase productivity and efficiency with any work the browser may be used for. Google Chrome and Mozilla Firefox are the most popular and widely used browsers so below we look at some of the useful tools for web designers and web developers that can be used with these browsers.

  • ruul. Screen Ruler (for Google Chrome):  This is a very useful tool for all web designers and developers, helping you measure just about anything on a web page and all to extreme accuracy. Features include horizontal and vertical rulers, line height guides, type measurements, stroke widths, pixel & picas measurements, ability to use multiple ruul's simultaneously and even use on local files.
    Click here to get extension from Google Chrome Web Store

  • Web Developer (for both Google Chrome & Mozilla Firefox): The web developer extension/add-on is a large suite of web design tools combined together and incorporated into the browser. The extension has extremely useful functions that help designers perform their tasks more efficiently. Inspect the CSS of a web page, find information about the html elements and meta tags, even validate a web page for W3C compliance, web developer has the tools for you, all simply added on to the browser as a tool bar.
    Click here for Chrome extension link
    Click here for Firefox add-on link

  • Firebug (for Mozilla Firefox): Similar to web developer this is another very useful tool that can be added on to the Firefox browser. It allows you to edit, debug and monitor CSS, HTML, and JavaScript live on any webpage. It's a very powerful tool that can help you quickly identify errors, monitor network activity, explore DOM object and even manage cookies. The add on itself has more extensions to increase its features such as FirePHP which helps make it a completed development environment allowing you to work on PHP as well.
    Click here to get add-on for Firefox

  • Page Speed (for both Chrome & Firefox): The speed at which a website loads and functions is very important to give the best user experience. This tool, developed by Google helps you analyse a web page and tell you to which aspects improvements can be made to increase the websites speed and performance. It's an ideal tool to test a websites ability to render fast as well as a great way to identify what can be done to improve a site's speed.
    Click here for Chrome extension & Firefox add-on download link

  • SEO Quake (for both Chrome & Firefox): In today's web development environment Search Engine Optimization is an important aspect of web design no matter how good a website is there is no point if it cannot be found. SEO Quake is a great tool for webmasters providing them with useful insights into any web page. You can check the Google PageRang (PR) for a page,  the number of backlinks, study the important meta-tags, check heading tags, keyword densities and a whole lot more.  A must have too for any web developer looking at SEO for a website.
    Click here for Chrome extension link
    Click here for Firefox add-on link

  • Resolution Test (for Google Chrome): When developing a website it is essential to make sure that it displays and performs optimally on a variety of screen sizes, especially with the popularity of mobile devices. Testing if a website is multi-screen friendly is now a normal part of web design and is something that is a must. The Resolution Test tool allows the user to change the browser window to a variety of commonly used resolutions so that developers can preview their websites on different screens.
    Click here to get extension from Google Chrome Web Store