37 helpful features of Firefox web developer plug-in

There are a plenty of useful Firefox plug-ins that help web developers carry out their tasks quicker. However, after dig deeper into the functionality of Firefox’s plug-ins, I found that Web developer plug-in (updated on 30 June 2009) is covered almost all possible tasks that offered by another Firefox extensions. The list below show the possible actions that can be carried out by this one-stop plug-in.

Forms
ff_form

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
ff_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
ff_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
ff_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
ff_image

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
ff_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
ff_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
ff_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
ff_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
ff_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.

  • http://www.idea-palette.com Chris

    Nice review! Very helpful! Thanks!

  • Isabelle Cady

    Howdy there,I find that your blog is extremely informative and helpful and we wonder if there is a possibility of obtaining More articles like this on your web site. If you willing to help us out, we can be willing to compensate you… Kind regards, Isabelle Cady

  • Caron Krikorian

    I’m learning so much. This is great ;)

  • http://www.buraq-technologies.com/ ambreen11

    I like the helpful info you provide in your articles. I’ll bookmark your
    blog and check again here regularly. I’m quite sure I will learn many
    new stuff right here! Best of luck for the next!

  • I donate $100/mo, why?

  • My Photography

  • Walk away Before Dawn Side forward Vivid Sydney Endless rain Cage Above the crowd