Web Developer Toolbar is a addon built for mozilla firefox web browser which allows developers and designers to increase coding speed and testing speed. It provides various functionality in managing css,javascript,cookies,dom,html,web forms, etc…. In this guide I am going to talk about using the css menu of the toolbar to optimize the quality of the code and pages by testing the web page properly.

Installing a firefox addon is very simple task. You can use the following steps to install and configure or read the article on “Manually Installing a Firefox Addon”.

 

• Go to https://addons.mozilla.org/en-US/firefox/addon/web-developer and click “Add to Firefox” button.
• Then it will ask you to install the plugin. Click “Install Now” button and it will be installed automatically in few seconds.
• Then Click the restart browser button after installation.
• Once the browser is restarted Web Developer Toolbar will be displayed below the Navigation Toolbar.
• If it is not displayed right click on the Title Bar and tick the Web Developer Toolbar checkbox and then it will be displayed in the location mentioned above.
• Check out the following screen shot on how the developer toolbar is displayed and be ready to get surprised by the functionalities provided by Web Developer Toolbar.

•  

  

   

• Disable Styles
  • All Styles
  • Inline Styles
  • Embedded Style
  • Linked Style Sheets
  • Browser Default Styles
  • Print Styles
  • Individual Style Sheets
• View CSS
• View Style Information
• Add User Style Sheet
• Edit CSS

Normally when we design a web application we have few external style sheets,inline styles and embedded styles. Do you ever thought about what will happen if the css styles doesn’t get loaded on time or there is a old browser which does not support new CSS. If your answer is no, you should definitely get the knowledge on that as a web designer. In such situations mentioned above your web site will look like a complete mess. Good web site should show the page content in a user readable way even if all css styles are disabled or removed. Disabling option provided by developer toolbar is excellent since it allows to remove complete set of stylesheets or parts you want instead of removing css from the original source code which we normally do. Lets move onto Disabling Style Features.

 

 

1. Disabling All Styles

Once you click on the All Styles checkbox on the Disable Styles menu, all the inline,embedded and external css will be removed temporally from the page displayed in the browser and output will be displayed on the browser. By doing this you can figure out whether your page is readable to users without css. Remove the tick to apply all the disabled css after checking.

2. Disabling Inline Styles

When we add style attribute in the tag declaration (Ex:

) we call it as inline styles. These type of styles are only valid to the applied tag and cannot be reused. It is not a good practice to write inline css styles since it prevents the reusability. But sometimes depending on the web page structure we might have to write some inline styles. By using this inline styles menu option in Disable Styles menu we can remove the inline styles. Then we can minimize the inline styles to improve reusability.

3. Disabling Embedded Styles

These types of styles are declared in the head section of the page. Embedded styles are reusable inside single page only. This is a better option if you have styles specific to each page. You can use the Embedded Styles option in the menu to disable the embedded styles and see the browser output.

4. Disabling Linked Style Sheets

Linked stylesheets are the external css files you use in the web pages. Writing CSS inside these files are the best and recommended method since it allows reusability of css code across whole web site. Using this option you can remove all the external stylesheets and preview the output on the web browser.

5. Disabling Browser Default Styles

Every browser has default set of styles embedded. Best example is the body tag which has a default margin and padding provided by the browser default styles. That’s why we set the margin and padding to 0 for body tag in every web application before we write the css. Using this menu option you can figure out what are the styles provided by browser default.Also alternative way to find this css is to type “resource://gre/res/html.css” in firefox and it will display the default style sheet.

6. Disabling Print Styles

There are various ways to define styles according to your output method. These are called media types and most common used media types are print and screen. Screen is used to define the css styles for web browsers and print is used to define the styles when you print the web page. Following code shows how we can create styles based on output format.

Using these options we can disable each type and see what it looks like in different output formats.

6. Disabling Individual Style Sheets

We can disable external styles sheets one by one using this option. When you go to this menu item it will display the complete list of linked css files. You can uncheck the files you want to disable and view the output on the browser.

View CSS item in the CSS menu will show all the inline,embedded and external styles in a single page where you collapse and expand to see the contents inside each file. This info page will be opened in a new tab by default. Following screen shot shows you how the css will be displayed.

 

 

Click on the “View Style Information” checkbox in the CSS menu to activate style information bar. you will see that new information bar will appear below developer toolbar. Then move the mouse around the page and you will see that html tag containers gets highlighted. Select the container you want information about and you will see that path to that container will be shown in the information bar starting from the html element. This is a great way to find the depth of an element and the parent containers of that element.

 

 

Add User Style Sheet menu item can be used to add a custom stylesheet to html and view the look and feel of the current page loaded on the browser. First disable all external style sheets by using the “Individual Style Sheets” function. Then add a new external style sheet using “Add User Style Sheet” option. This is useful if you have style sheets based on color theme. You can apply different style sheets using this option and check the output without changing the source code. This is one of the most interesting features I have used in the developer toolbar.

Edit CSS option in the main menu is a great feature to change the css files. Once you click the menu item window will be loaded on the bottom of the screen as shown below.

 

Any modifications done using the web developer css menu will not apply permanently to your web page code. All the changes are saved in temporary files and once you refresh the browser window the original code will be loaded.

 

 

In the window you can see that all the css files and inline styles related to the current page is displayed. You can select any css file and modify the css code in the window and it will get applied to your web page. Edit window contains a list of functions which are shown as little icons and I’m going to explain how to use them.

 

• Open Icon
  • Once you click on the Open Icon file browser will load and select a css file from your local machine and click open.
  • The css file selected will be applied on the web page.
• Save Icon
  • Select any css file and modify the css styles on the file.
  • Then click the Save Icon and file browser will open asking you to select a location to save.
  • Modifications done using the edit window will apply to the css file and you save it for later use.
• Clear Icon
  • You can clear the all the css file content by selecting a css file in the edit window and clicking the Clear Icon.
• Reset All Icon
  • Editing css files using any option in the edit window and once you finished checking click this icon to reset all the changes.

Any application has its limitations in various situations. Check out the Web Developer Toolbar issues if you have any problem working with it using the following link.

Web Developer Toolbar Known Issues

 

In this post series on “Guide To Managing Web Developer Toolbar” I am going to talk about managing images in the web page. Find out more information on my next post on “Guide To Managing Images Using Mozilla Firefox Web Developer Toolbar“. Feel free to add comments related to this post and join the discussion to find out more.