I am not an expert in web designing and development. But for my little works this tool helps me a lot. Here download it from here for Firefox Web Developer Toolbar Download
I know you guys must obviously know about this,
But I thought to share with you guys to find out for people who don't know about this.PS. Neo, Would you mind adding a Horizontal line adding function
I tried adding Code: Select all
<hr/>-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Web Developer Toolbar Overview
After you install the Web Developer Toolbar, you have to close all your Firefox browser windows and restart Firefox. You will then see the Web Developer Toolbar under the Firefox navigation buttons. The toolbar is the part that says "Disable", "Cookies", "CSS", "Forms", "Images", and so on. This page was written using the Web Developer Toolbar version 1.0.2, but it should be similar even if you are using a different version.
Using the Web Developer Toolbar
After you install the Web Developer Toolbar you will see the menu items across the top of the browser, from left to right:
Disable
These menu items allow you to disable features on a web page, such as caching, Java, JavaScript, meta redirects, page colors, referrers, and more. Two items on this menu that are particularly useful are the Disable Referrers, which gives you added privacy on the Web, and Disable Caching, which is useful when you are updating a web page and need to make sure you are viewing the latest changes when viewing it in the browser.
Cookies
The Cookies menu gives you options that are useful when programming a site that uses cookies. Examples are, disable all cookies, disable external site cookies, clear session cookies, delete domain cookies, delete path cookies, view cookie information, and add cookie.
CSS
This menu contains my favorite feature of the Web Developer Toolbar: Edit CSS. When you activate this feature, you can edit the CSS of a web page in a sidebar in real time and see your changes updated on the web page as you type them. For example, maybe you want to see what your site would look like with a different color and font. In the image below, I am quickly checking what this page would look like with a green header background, just by editing the CSS in the sidebar. As soon as the sidebar is closed, the changes are discarded.
- edit-css[1].gif (33.21 KiB) Viewed 4434 times
Forms
A useful item on this menu is the Form Information option. It will tell you information about the forms on a web page. You can also use the Populate Form Fields option to automatically fill out your forms when testing your site. Other options on the Forms menu include: display form details, show passwords, view form information, convert form methods (e.g., from GETs to POSTs or vice versa), Convert Selected Elements to Text Inputs, Enable Auto Completion, Enable Form Fields, Clear Radio Buttons, Make Form Fields Writable, Populate Form Fields, and Remove Maximum Lengths.
Images
You can use these options to display the dimensions and file sizes of images on a web page. You can hide the images on a page, or show the image paths. You can outline images without alt attributes, making it a quick way to find where you might have missed something.
Information
The information menu has a lot of options on it. You can find out more information about the structure of your page with Display Id & Class Details, and Display Element Information. Those are both useful because they visually display the CSS class and ID names on a web page, which then makes it easier to use the Edit CSS option to experiment with the look of the page. An image of the Display Id & Class Details is shown below. You can also use the Information menu to check how many layers of nested tables a page has with the Display Table Depth feature. You can view the palette of a web page by choosing View Color Information. If you want to know how large the files on a page are, choose View Document Size. Another useful tool is View Response Headers.
- div-id-class-details[1].png (65.99 KiB) Viewed 4434 times
Some useful items on the Miscellaneous menu are Small Screen Rendering which can give you an idea of how your site might display on a portable device like a PDA or cell phone. You can also overlay line guides on a page, or display a ruler in order to get pixel-perfect measurements of the layout. You can even edit the HTML in the sidebar and watch the web page update itself in real time.
Outline
These options will outline elements of a web page, allowing you to find certain things that you might be looking for. Examples of things that you can outline are frames, headings, table cells, tables, block level elements, external links, and even custom elements. These are very useful for figuring out why a page doesn't display correctly.
Resize
See what your web page looks like at different resolutions such as 800x600, or choose a custom size. You can also zoom in or out on a web page.
Tools
The Tools menu has options to validate your HTML, feeds, CSS, and links. You can also get a speed report, open the DOM Inspector, Java Console, and JavaScript Console.
View Source
This gives you another way to view the source of a page, although it is faster to just use the keyboard shortcut Ctrl-u. The real power of this menu is activated after you go to the options menu. You can set Firefox to view source in an external editor, including setting a custom keyboard shortcut. For example, you could keep the normal shortcut to view source with Ctrl-u, and add another shortcut to view source in SciTE (or another favorite text editor) with Ctrl-Shift-u.
Options
This menu item allows you to customize the Web Developer Toolbar.
