Browser Tools (Extensions) for web development and digital media

Many web development tools are available as browser add-on applications, particularly for Mozilla Firefox and Google Chrome. This group of development resources only requires a web browser to be installed on the student's computer. Browser add-ons for Firefox are installed as extensions to the browser platform. Most browser add-ons are free or the developer may suggest/request a voluntary donation, if you find the add-on to be useful. This browser add-ons page provides a listing of the popular browser add-ins for web developers.

Must-have extensions of the Firefox browser platform can be found at the Firefox Add-ons web site and include Firebug which is a full‐fledged code inspector and debugger. Other extensions are available for many other useful tasks. The Chrome browser has a similar set of tools automatically built into its code inspector accessed through 'More tools' -> 'Developer tools' menu items. Chrome browser extensions can be found at the Chrome Web Store and Opera extensions can be found at the Opera Add-ons site.


Web Browser

Mozilla Firefox (Developer Edition)

The Mozilla Firefox Developer edition web browser is a powerful development web browser available for all major operating platforms. This version of Firefox has built in tools for inspecting and debugging web apps across any browser or device. Has tools allowing views at most typical screen sizes that allow developers to tweak CSS on the fly. Like regular Firefox, Firefox Developer Edition also has a large number of additional third party browser add-ins for web developers. Firefox Developer Edition is free to use.

More info

Web Browser (built-in tools)

Chrome (Chrome Developer Tools)

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization. Chrome also has a large number of additional third party browser add-ins for web developers.

More info

Web Browser (built-in tools)

Firefox (Page Inspector)

The Firefox Page Inspector, is a set of web authoring and debugging tools built into Firefox. The Page Inspector provide web developers deep access into the internals of the browser and their web application. Use the Page Inspector to examine and solve layout and styling issues, examine event listeners, and even examine the contents of the local storage used by the web page. Page Inspector lets you examine pages loaded in the local copy of Firefox or in a remote target such as a Firefox OS device or Firefox for Android. Firefox also has a large number of additional third party browser add-ins for web developers.

More info

Browser Extension (Inspector/ Debugger)

Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug also supports its own extensions to extend its capabilities even further.

More info

Browser Extension (Inspector/ Debugger)

Firebug Lite (for 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 a rich visual representation when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some handy features like inspecting HTML elements with your mouse, and live editing CSS properties. This extension is only available for Chrome.

More info

Browser Extension (Tool Suite)

Web Developer

The Web Developer extension adds a toolbar button to the browser (and also a menu for Firefox) with various web developer tools. Versions are available for Firefox, Chrome, and Opera.

More info

Browser Extension (Code Editing)

DevTools Autosave

Saves changes in CSS and JS that are made via Chrome DevTools. This extension is only available for Chrome.

More info

Browser Extension (Task Automation)

iMacros

Allows you to automate your web browser. Record and replay repetitious work steps as stored macros. Versions are available for both Firefox and Chrome.

More info

Browser Extension (Wireframe Testing)

Instant Wireframe

Instant Wireframe allows you to view any web page, local or on the web, with a wireframe overlay. This extension is only available for Chrome.

More info

Browser Extension (Style Testing)

Stylebot

Change the appearance of websites instantly with Stylebot. This extension lets you manipulate the appearance of any website with custom CSS. You pick an element and choose any changes you want to make from the editor. You can change the font, color, margins, visibility and a lot more. You can also write CSS manually. You can preview and install styles created and shared by other users on Stylebot Social. This extension is only available for Chrome.

More info

Browser Extension (Platform Testing)

Ripple Emulator

Ripple is a browser based HTML5 mobile application development and testing tool. Ripple offers the ability to look under the hood of your mobile application, giving you full visibility into what it is doing. It also allows for the use of existing tools to perform JavaScript debugging, HTML DOM inspection, automated testing, as well as multiple device and screen resolution emulation in real-time without having to redeploy the mobile application or restart the emulator. This extension is only available for Chrome.

More info

Browser Extension (Platform Testing)

IE Tab

IE Tab is a browser extension that allows you to use Internet Explorer to display web pages in a tab. It exactly emulates IE by using the IE rendering engine directly within your browser. This will enable you to use ActiveX controls and test your web pages with different versions of IE (IE6, IE7, IE8, or IE9). This extension is available for Firefox and Chrome.

More info

Browser Extension (Screen Testing)

Resolution Test

Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customize that list. It also gives users the option to turn on Google Browser Size. This extension is only available for Chrome.

More info

Browser Extension (User Agent Testing)

User-Agent Switcher

A user agent is a small text description of your device that is sent with every web request. The User Agent Switcher changes your user agent to spoof other devices and/or browsers. You can put on your IE hat and slip past virtual bouncers into Internet Explorer-only websites; blend in as an iPhone or see how sites render when they think you're Google's search spider. This extension is only available for Chrome.

More info

Browser Extension (UX Best Practices)

Web Developer Checklist

Analyses any web page for violations of best practices in terms of SEO, usability, accessibility and performance (page speed). This extension is only available for Chrome.

More info

Browser Extension (Performance Testing)

YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages developed by Yahoo engineers. YSlow grades web page based on one of three predefined rule sets or a user-defined rule set. It offers suggestions for improving the page's performance, summarizes the page's components, and displays statistics about the page. Versions are available for both Firefox and Chrome.

More info



Browser Extension (Component Files)

View Dependencies

View Dependencies adds a tab to the Page Info window, in which it lists all the files which were loaded to show the current page. This extension is only available for Firefox.

More info

Browser Extension (Coding Docs)

PHP Ninja Manual

PHP Ninja Manual provides PHP 5.5 documentation in 8 languages available right from your browser in a popup. This extension is only available for Chrome.

More info

Browser Extension (Code Debugger)

AJAX Debugger

AJAX Debugger will log all AJAX (XMLHttpRequest) activity to Chrome's Developer Tools Console. This allows developers to easily see top-level request info, like the HTTP status, response time, and size. Click the URL to open the AJAX call in a new tab, including all the inputs, making debugging much easier. You can even drill down to see all the low-level request details including the HTTP header information. This extension is only available for Chrome.

More info

Browser Extension (Component Files)

JSONView

Validate and view JSON documents in the browser with JSONView. This extension is available for both Firefox and Chrome.

More info

Browser Extension (database extension)

SQLite Manager

Manage any SQLite database on your computer. This extension is available only for Firefox.

More info

Browser Extension (Color Tools)

ColorZilla

ColorZilla is an essential add-on for web designers with tools for examining colors used in websites. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. Tools include Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies. Versions are available for both Firefox and Chrome.

More info

Browser Extension (FTP Client)

FireFTP

FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers. This extension is only available for Firefox.

More info

Browser Extension (SSH Client)

FireSSH

FireSSH is a free, cross-platform SSH terminal client for written entirely in Javascript. This extension is available for both Firefox and Chrome.

More info

Browser Extension (Font Testing)

Font Playground

Preview your site with Google web fonts and get the css code using Font Playground. Use over 1000 free Google web fonts and preview them with this extension. Go to your web page, click on "font playground extension", select a font and preview the result. This extension is only available for Chrome.

More info

Browser Extension (Font Identity)

WhatFont

For an easier way to determine the fonts used in a web page than opening up the elements in Firebug or Webkit Inspector, by using WhatFont, you can 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. This extension is only available for Chrome.

More info

Browser Extension (Design Validation)

Pixel Perfect

Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML. This extension is only available for the Firebug add-on to Firefox.

More info

Browser Extension (Design Validation)

Perfect Pixel

Perfect Pixel is a browser extension for web developers and markup designers that helps produce websites with single pixel accuracy. Perfect Pixel allows developers to put a semi-transparent image overlay over the top of the developed HTML and perform per pixel comparison between them. This extension is available for Firefox, Chrome, Safari, and Internet Explorer.

More info

Browser Extension (Measuring Tool)

Page Ruler

Page Ruler allows you to draw a ruler to get pixel dimensions and positioning coordinates, and measure elements on any web page. This extension is only available for Chrome.

More info

Browser Extension (Measuring Tool)

MeasureIt

MeasureIt allows you to draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels. This extension is available for both Firefox and Chrome.

More info

Browser Extension (Framework Identity)

Appspector

Appspector detects web applications, frameworks, content management systems (CMS), and JavaScript libraries running on the current web page in the browser window. Currently, Appspector can detect more than 100 popular CMS and JavaScript libraries. This extension is only available for Chrome.

More info

Browser Extension (Microformat Detection)

Microformats

The Microformats extension displays any microformats (semantic encoding) on a web page. Supports hCard, hCalendar, hReview, hRecipes and geo microformats. Export cards to *.vcf or events to *.ics files to add data to Address Book or iCal. Microformats extension also can add a card to your Google Contacts and an event to your Google Calendar. This extension is only available for Chrome.

More info

Browser Extension (Image Editing)

PicMonkey

The PicMonkey Extension lets you instantly grab images from any Web page and open them up in PicMonkey's editor. To use, simply click the PicMonkey icon when you're viewing a web page. Every image on that page and a screenshot of the entire page appears as a tiny thumbnail in a sidebar. Select one to edit in PicMonkey's editor. Its lean and fast engine lets you perform basic edits, like crop and rotate, and enhance your images with special effects, overlays, fonts, textures, frames and touch up tools. This extension is only available for Chrome.

More info

Browser Extension (Text Scraping)

Copy As Plain Text (for Firefox)

Copy As Plain Text removes formatting from copied text. This extension gives you an option to copy text without the formatting. And unlike the keyboard shortcut (Ctrl+Shift+V), you can even customize how it will copy & paste. Copy As Plain Text (for Firefox) is a different app than the Chrome extension with the same name. This extension is only available for Firefox.

More info

Browser Extension (Text Scraping)

Copy As Plain Text (for Chrome)

Quick and easy, this extension allows you to copy selected text from the browser window without formatting (as plain text) to the clipboard. Copy As Plain Text (for Chrome) is a different app than the Firefox add-on with the same name. This extension is only available for Chrome.

More info

Browser Extension (Text/Image Scraping)

Project Naptha

Project Naptha automatically applies state-of-the-art computer vision algorithms on every image you see while browsing the web, which then allows you to highlight, copy and paste, and even edit and translate the text formerly trapped within an image. You can move your cursor over a block of words embedded in an image and watch as the cursor changes into a little I-beam. Drag over the text to highlight. Hit Ctrl+C to copy the text to the clipboard for further use. This extension is only available for Chrome.

More info

Browser Extension (Video Scraping)

Video DownloadHelper

DownloadHelper is a tool for web content extraction. Its purpose is to capture video and image files from a number of web sites. It works with YouTube, MySpace, Google videos, DailyMotion, Porkolt, iFilm, DreamHost and others. This extension is only available for Firefox.

More info

Browser Extension (Audio/Video Scraping)

Flash Video Downloader

Flash Video Downloader helps you to download any video (flv, mp4, HD) from YouTube-like sites, Facebook, Break, Metacafe and more with one click. You can record video from YouTube in several different formats (HD, MP4, Low FLV, etc). You can also download mp3, music (iPod), avi and other media files including Flash games. This extension is only available for Firefox.

More info

Browser Extension (Proxy/VPN Management)

FoxyProxy

FoxyProxy is an advanced proxy management tool that simplifies configuring browsers to access proxy-servers. FoxyProxy helps you easily connect to and manage your favorite proxy/VPN service. This extension is available for both Firefox and Chrome.

More info


Browser Extension (Cookie Manager)

Cookie Exporter

Cookie Exporter exports all cookies and makes a Netscape standard cookies.txt file. This extension is only available for Firefox.

More info