YOU ARE HERE: HOME > ARTICLES 2005 > FIRE FOX ROCKS
The buzz about FireFox is all over the net; people are discovering that it’s a great browser to go surfing with. Yet besides web surfing, FireFox offers a bunch of features for web designers that can only be described as cool!
Any web designer knows that being able to view the web page source code is very important during the development phase. This is especially true when you are building dynamic websites with say PHP, ASP, JSP et cetera.
I’ve put together 5 things about Firefox source-code-view that puts a smile on my face:
One thing that would tick me off with IE is when (for reasons unknown) it would just refuse to display the source code when I wanted to see it! No warning, no message, nothing … very frustrating.
After digging around the web, I discovered that IE has connected the viewing of the source code with its own cache. When the cache becomes full, IE will simply not display the source code! To fix this, you have to go into the IE’s menus and clear the cache.
Needless to say, FireFox doesn’t seem to have that problem.
You have two ways to view the page source in FireFox:
There are 3 nice features in the FIND functionality:
Hot-key combo: Ctrl+F
This handy little feature can be useful to track down a JavaScript error in your web page. Often times, the error message will tell you the line number where the error occurred – sometimes not easy to find without a handy GOTO line feature.
You’ll find this function under the ‘edit’ menu or simply using the hot-key combo of Ctrl+L.
When you pop open the web pages source code (Ctrl+U,) you will find that the HTML tags, their attributes, comments and raw text each have there own color, this makes the source much easier to read.
This may seem like a minor issue at first. But when you compare this colorful view against IE’s monotone display of the source code – you’ll change your mind.
IE uses notepad.exe to display the source code; this simple text editor is simply not equipped for the job.
1. Under View > Page Style > No Style
This option allows you to see the web page without CSS affecting it. This is interesting to view because it can give you an idea of how the page might look on machines that can’t work with CSS – things like a cell phone.
2. Under Tool > Page Info
This pops open a handy little window that presents a nice summary of what’s on the page. You get a list of all the links, forms and their properties, what types of media elements you have on the page – things like images and Flash movies et cetera.
Overall I think the Page Info feature provides a nice view of a web page that can help you during development and upkeep of your websites.
3. Under Tools > Extensions
One of the most ingenious things the FireFox team came up with is its extensions functionality. Ok, creating a plug in framework for a program is nothing new but in FireFox, it has become the source of some great functionality that you can add to FireFox very easily.
Several plug in programs have been created for web developers, you can check them out here:
Until next time,
Stefan Mischook
www.how-to-build-websites.com : A tutorial designed to teach total beginners the fundamentals of a modern web design.
www.csstutorial.net : A website dedicated to teach total beginners the sister technology/language to HTML: CSS. CSS (cascading style sheets) is a must learn aspect of web design that gives the web designer total control over the page layout and style.
www.secretsites.com : A grab-bag of tips and tricks that I have picked up over the last 10 years.
www.websitetemplates.name : Build websites in record time with web templates.
