Categories
Popular Posts
RSS Feeds
ArchivesCustomizing Firefox for Web Development
September 28th, 2007One of my most valuable tools as a web developer working in Linux, is Firefox. I think I can safely assume that you're familiar with the Firefox web browser if you're reading this post. However, you may not be familiar with some of the tools to assist you in created your web pages.
Search Engine List
In the upper-right corner of the Firefox browser, is a search box most likely set to search Google. However, the icon is a drop-down list of various search engines you can quickly search from this box. If you go to Mycroft Project you can download additional search engines for that list. (You can also remove them by clicking the drop down icon and selecting 'Manage Search Engines').
Some of the search engines I find valuable as a web developer are Godaddy.com, Alexa, and some of the various forums I frequent such as Linux Questions and Ubuntu Forums. It's a nice way to be able to search your references from a single location.
DOM Inspector
The DOM Inspector allows you to view the Document Object Model structure of the page in a hierarchical tree and view information about each of the nodes. As you click a node in the DOM Inspector, the element in the page is highlighted so you can easily track down layout issues and CSS problems.
The DOM Inspector is accessed through the 'Tools' > 'DOM Inspector' menu. If you do not have this, then the DOM Inspector isn't installed by default for your version of firefox. You'll have to find the appropriate package for your distribution. In ubuntu, the package is firefox-dom-inspector and can be installed by issuing the command:
sudo aptitude install firefox-dom-inspector
Error Console
The error console allows you to view real-time javascript errors and bad CSS declarations. This is a VERY handy little feature. You can open the Error Console in Firefox by selecting the 'Tools' > 'Error Console' menu. Once opened, you'll probably want to hit 'Clear' and then refresh the page you're checking for javascript and CSS errors.
HTML Validator Plugin
The HTML Validator plugin is, in my opinion, the easiest way to keep your code valid HTML. The plugin has the option of 2 different parses. I choose the SGML parser as it gives me tighter control and an exact match to the W3C's HTML validator.
In addition to validating your code and showing you if there are errors or warnings in the icon at the lower corner of the screen, it also gives you details in the view-source screen and includes a Tidy cleanup feature to automatically clean up your code and get it validated.
Web Developer Add-on
The Web Developer add-on is another must-have for web developers. This Firefox toolbar has a whole slew of features including quick icons to the Error Console, the ability to modify and clear cookies and cache, and a ton more. Check out the website for a full list of features. This one is a life-saver.
View Source Chart
The View Source Chart add-on is great for trying to figure out problems with older or complicated messy code. You can easily find nesting errors in your HTML. It shows a graphical representation of the nesting of each of the HTML elements as boxes within boxes.
Posted on
Friday, September 28th, 2007 at 11:06 am
Categories
Web Development PHP
Related Posts
Technorati Tags
October 5th, 2007 at 4:36 pm
You should check out FireBug. It will let you change the HTML, CSS, and JavaScript on the fly without reloading the page. The "Inspect" feature will even let you drill down to see exactly what CSS styles were applied to an element and where those styles came from.
http://www.getfirebug.com/
October 6th, 2007 at 10:52 am
Very cool. Thanks for the tip!
November 20th, 2007 at 7:32 am
You should also check out YSlow. YSlow analyzes any web page and generates a grade for each rule and an overall grade. If a page can be improved, YSlow lists the specific changes to be made. It's an extension of Firebug which is an extension of FireFox. Confusing.
http://developer.yahoo.com/yslow/