Forms

1. Show password in textbox field – This feature allow you to view password in textbox password field. This helps when you forgot the password that is already saved in the browser. It is also useful when your application need to test the returned value in password field.

2. Display form detail/information – save your time finding the attribute of form elements by either show the detail next to the element or display the information in the nice looking table.

3. Convert form method - Change POST to GET method, so the variable and data will show on the URL address bar. This help you verify the received POST value without writing the code.

4. Populate form field - Auto fill the form element on screen. This help you fill out data on the form. Imagine if you have 20 elements on the screen that is needed to test, Only one click, all element are filled and ready to process.

5. Enable form fields - it is a nice user experience to disable form fields that should not be used. However, the server side need to be coded to validate all the data again to ensure the security. This feature allow you to enable the unreachable fields, then you fill test data and get feedback from server side.

CSS

6. Disable style – allow you to disable every css styles or some styles on the desire media.

7. View style information (Ctrl Shift Y) - this feature is compatible with Inspect Element in popular Firebug plug-in. It allows you to move the mouse over the element on the screen and retrieve the CSS information.

8. Edit CSS (Ctrl Shift E) - Again, same as Firebug, you can edit the style on the fly. This feature will list all style sheet that involve the current web page. The change will suddenly appear once you type the new code. Web developer plug-in also allow to save the modified version of style sheet into files. Therefore, after change, you can just copy and replace the old one on the server.

Resize

9. Display window size in title - Show the size of current browser’s window on the title panel.

10. Resize window to specific dimension - This help you place the specific dimension numbers for resizing. The resize feature help you analyze the appearance of website in different screen resolutions. Check Wikipedia for the list of screen resolutions (do not worries to the computer in the last 15 years)

Miscellaneous

11. Clear private data – Save your time doing Tools > Clear recent history > Detail > Clear now on Firefox menu.

12. Display ruler - This feature is compatible with MeasureIt plug-in. The browser will allow you to create a movable ruler and measure the element on the page.

13. Show comment – allow browser to display the content inside HTML comment (<!– content –>)

14. Show hidden element – Visible the hidden element on the screen.

15. Edit HTML – Again, you allow to edit HTML and see the result on the fly. (Firebug inspection comparable)

16. Small screen rendering - See how your website appear on the small media screen like iPhone, Black berry

Images

17. Disable images - see how your website look like with out images

18. Display alt attribute - Check image alternative text on the screen. This useful when you check for images for SEO.

19. Display image dimension – See the dimension of images on screen. This help when you want to replace the old image with the new same size image.

20. Display image file sizes - Show all file sizes of images on the screen. So you can see how each image effect your website loading time.

21. View image information – Display all images information in a nice looking table.

22. Find broken images – Firefox 3.5 not show the images that unreachable. This feature will show the list of broken images in the new window.

Disable

23. Disable cache – Browser keep cache files in order to reduce the time loading same page in the future. However, sometime cache files make the website not up to date and you cannot actually see what happen after you change the code. Disable cache when you need to do a regular change and hit browser refresh.

24. Disable JavaScript – use this feature when you want to see how your application work in the browsers that may not support JavaScript.

25. Disable Java - again, disable Java. So you will know what will your visitor see if their computer have not install the Java run-time environment.

26. Disable page color – see your website without color. This may useful when you implement application for mono screen media like old mobile.

Cookies

27. Disable cookies - an option to disable every cookies or just one specific part.

28. Clear cookies – again, you are able to clear base on your desire cookies type.

29. View/Edit/Delete cookies information – this feature allow to view, edit and delete the specific value inside each cookies. It also good to make sure that cookies create by your application is encoded. This will ensure some security level of your application.

30. Add cookies - web developer plug-in even allow you to add cookies on the fly.

Outline

Outline is one of the useful feature that allow Firefox to mark specific element on the screen.

31. Outline frame – allow you to see what part of website are compose of frame element.

32. Outline heading – this feature mark up each heading level in different color. For example, heading 1 will surround by red box and heading 2 will surround by green box. You can see the overall content structure and determine the practice for SEO.

33. Outline links - outline specific link types.

34. Outline table - allow you to see each part of tables on the screen.

Information

35. View color information – allow you to see the list of color and code for each web page. This function is not compatible with Color Zilla plug-in. However,  the strong point is you can see the overall of the color used in the website. This is useful when you study color design of another website.

36. View header response – This feature is able you to see the hidden header response of each page. The normal page should return 200OK and the missing page should return 404. The header response it the only way that search engine robot can determine the existed web page. If your 404 page return 200OK, Google will think you are trying to cheat.

There are a lot of information that you can retrieve by this feature of web developer plug-in. 35 and 36 are what I’m regularly use.

Tools

37. Validate your code – tools section allow you the validate various type of code. For example, you can validate HTML, CSS, RSS and links.

I believe that Chris Pederick has put a lot of time and effort to implement Firefox web developer plug-in. If you like his plug-in, be nice to him. Buy him a beer by donate for Firefox web developer plug-in. I’m quite sure that what we get is worth than a glass of beer.

Microsoft’s responsibility become yours

However,  your bright life may become darker, your holiday plan need to be canceled when client call you and said “Oh! drop-down navigation is not working, can you fixed that please?”.  Not yet, after few minutes, the same client call you again and said “What the fu-k of your project, 20 customers canceled the orders because the check out button does not work!”. Then, you apologize and rush up to web statistic system. The graphs on the screen say  ”Yes sir, it was Internet explorer”.  Then, it will be the end of your holiday and the end of another business with this client and all of his friends.

As web developer, you cannot call back to the client and told them that it was Microsoft shit, because now it is become your shit. The above scenario should not happen or happen only once for your first project, or you will end up web development life and continue feeding pigs at the farm down the suburb where computer is not the first equipment.

The statistic of browser usage in 2009

The Browser Statistics from w3schools presents the number of internet browsers usage from 2002 to 2009. Briefly, in 2009 there are 47% of internet surfer use Firefox. Beside, 40% of user use IE6-7-8 (hm..m.. this percentage probably come from executive users who do not know much about technology issue. However, they involve directly to money in web developer pocket). By the way, the rest are Chrome, Safari and Opera.

You may believe that “Firefox is the best internet surfer that only need to be installed in your OS”. However, according to browser statistics from w3school, you may have to change your idea to “Firefox is not only best web browser because some people choose to surf website with chrome and opera, and some are using Safari as Apple fever. Most of all, a lot of people trend to use IE as it was initially integrate to Microsoft system at first purchased”.

The purpose of this article is to remind the beginner not to overlook the cross browser testing issues. However, it is not cover all detail of how each web browser act different in one particular website. The only thing you need to know is IE was suck when browsing CSS and JavaScript.

Download web browsers that will involve your life

Here is the list of  browsers to download. If the browsers in the list below are not installed in your OS and you are web developer, I suggest that you should download it now.

IETester – For one install, you get IE5.5, IE6, IE7 and IE8 to test your project. No need to visit Microsoft.
Download IETester

Multiple IEs – If you think IE5.5 is not old enough, Multiple IEs provide you a set of IE3, IE4, IE5 and IE6. If the browser crash during the test, no panic. It is the common behavior of Microsoft’s browser.
Download Multiple IEs

IE Standalone – This is an optional. If you are decided to install Multiple IEs to get an older version of internet explorer, you may upgrade your default IE to IE7 or IE8. After that, download and install standalone of the missing version. IE Standalone allow you to run another IE version separated from the default IE.

Download IE7 Standalone
Download IE8 Standalone for XP
Download IE8 Standalone for Vista
Download IE8 Standalone for Window Server 2003
Download IE8 Standalone for Window Server 2008

Firefox – Yeah, here is something more relax. Be aware when you install too much plug-in, the browser will pretty much slow down. If you get a chance, tell everybody about firefox. Then, we can change the world.
Download Firefox 3.5

Google Chrome – Google apply to KISS approach (Keep It Stupid and Simple) again. The browser is a light and quicker. However, because the faster browsing, they have to keep the high cache files which sometime caused the browser not up to date when you hit refresh button. Use it when you doing a research on internet. Introduce it to Grand mom, Grand dad and uncle Bob. They will love it!
Download Google Chrome

Safari – If you are one of Apple’s Fan, here we go!
Download Safari

Opera – Another alternative light weight browser, there are no CPU hunger by using Opera.
Download Opera

That is all of my suggestion. If you have another additional web browser that should be tested before delivery web project, please use comment below.