Chanon raise his hand

Work like you don't need the money
Love like you'll never be hurt
Sing like nobody's listening
Dance like nobody's watching
More about me »

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

  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

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

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

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