CIS86 2007 : Firefox Web Tools
During this class, we will be using the Web browser Firefox as our main development platform. This approach yields some significant advantages for us:
- Works equally well on both Apple and Windows computers.
- Decent support of HTML standards.
- Free SW can be installed on any computer.
- Add-ons provide HTML editing (via Codetch) and FTP file transfers (via FireFTP), and many other free tools for Web developers.
- Simpler tools and setup than when using GoLive.
I am requiring the use of certain Firefox add-ons, and suggesting others that you will find useful. You can download Firefox itself from here if you don’t already have it.
Required Add-ons for Web Developers in Firefox
- FireFTP : Tools > FireFTP : graphical FTP client for transferring files over the Web.
- Codetch: Tools > Codetch > Float/Tab : a Dreamweaver-ish HTML editor -- really well done (and free).
- FireBug : integrated debugger, inspector for HTML, CSS, DOM, JS
- Web Developer Toolbar : via toolbar or Tools > Web Developer : superb tool for inspecting pages. Includes Cntl-Shift-F for interactive inspection.
- FEBE: backup utility for extensions, settings, profiles.
- View Source Chart : Tools > View Source Chart : shows the color-coded structure of the current document in another window.
Suggested Add-ons
- Colorzilla (click on Eyedropper, bottom-left of FireFox) : samples colors on the fly from anything in the browser window
- MeasureIt (click on Ruler, bottom-left of FireFox) : measure distances between any points in the browser screen.
- IE Tab (right-click on tab or click icon at bottom-right of FireFox) : switches to use Internet Explorer's rendering engine inside a tab in FireFox. Windows only.
- HTML Validator: validator for HTML and CSS
- Font Finder : shows all characteristics of the selected text
- DOM Inspector: shows an expandable outline-oriented view of the elements on a page. (This is not an extension; it must be installed with Firefox – it is an optional part of the installation.)
- Professor X (Tools > Professor-X) : shows meta info about the page, including embedded style info.
- Font Finder (Tools > Font Finder, or off the Right-Click Context Menu) : shows all font-related info about the selected text on the current page.
- MetaTags Sidebar : left sidebar with lots of meta info.
- SearchStatus : display Google and Alexa ranks and other SEO info
- About This Site: various kinds of meta, SEO info about a site
- CSSViewer : Tools > CSSViewer : hovers info about the tag you're over
- Screen Grab! : screen grabber that can save entire window, not just viewport
- NikkelWHOIS : WHOIS button, upper-right in FireFox : lightweight WHOIS to see who owns a domain name
- View Cookies: see what cookies are being set by a site
- View Dependencies: a lot of info about page components
Other Handy Addons