The buzz about FireFox (FX) is all over the net; people are discovering that it is 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!
VIEWING WEB PAGE SOURCE CODE
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 put a smile on my face:
PAGE SOURCE ALWAYS WORKS – IE DOESN’T!
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.
HOT-KEY ACCESS TO SOURCE CODE VIEW
You have two ways to view the page source in FireFox:
- Got to the ‘View’ menu and then select ‘Page Source’.
- Or better yet, just use the hot key combo: Ctrl+U. This hot key combination is especially useful for lazy web designers like me …
There are 3 nice features in the FIND functionality:
- You have the option to have FireFox highlight all the occurrences of the search term at the same time - this allows for a quick scan of the page.
- FIND also has a ‘Match Case’ option.
- The FIND dialogue box appears as a tool bar at the bottom of the page- much more convenient than the floating box you get with IE … that floating box always seems to get in the way!
Hot-key combo: Ctrl+F
GOTO LINE FEATURE
You'll find this function under the ‘edit’ menu or simply using the hot-key combo of Ctrl+L.
PAGE SOURCE COLOR CODING
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.
MORE WAYS TO VIEW THE PAGE
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,