1-703-463-9240
Introduction
Web Browser is the most important Applications to Access website or web application launched over the web. The task of the web browser is to display and render HTML given by the Web Server as a Response of client Query.
In this era, where every website is based on different technologies, thus Browsers need to be updated with these technology changes in order to display web pages perfectly fine. There are many browsers which internet visitors may use of different versions either old or updated which can effect in displaying websites.
When we talk about Mozilla Firefox it has become the most popular and famous web browser among all just because it has given many useful add-ones for the developers, designers and for normal visitors.
Following are the Mozilla Firefox Add-ones for designers or developers:
1. Web Developer Add-one
Overview:
- Web Developer is the most functional add-one of the Browser Firefox.
- It provides the extensive support about different parameters of web development like CSS, HTML, screen resolution, CSS validation, and HTML validation from the w3c website.
- Following are the few important list items of the web developer toolbar that are added right after its installation as mentioned below:
| Web Developer Add-one: Provides Extensive support for Website Development | ||
| No | Features | Description |
| 1. | Line Guide Information
(under Miscellaneous) |
Allow web developers to check the alignment of every web page. It allows you to draw as many horizontal and vertical lines for the alignment. |
| 2. | Color information
(under information) |
The designer has the close relation with the use of colors. Firefox has the great add-ones for the color information like Colorzilla, but web developer has the color information support to view the list of all CSS colors and samples. |
| 3. | Element Information
(under information) |
With the web developer add-one you can view all the information about elements of the web page. Just click CTRL+SHIFT+F on the web page, and click on any place of the web page and get all details about HTML elements. |
| 4.
|
Images
(under Images) |
You can take an overview of every single image of the web page like image alts attributes, image dimensions, Image paths, find broken images etc… Thus provide a real support in real time. |
| 5. | View Page Information
(under information) |
You can view all the page information from general to the advance level about forms, images, size , paths dimensions, Get, Post methods. |
| 6. | Show Passwords
(under forms) |
You can view all the password of the web page which is saved as a cookie. It’s a bit secret utility for someone who forgets his password. |
| 7 | View Form Fields
(under Form) |
This is very important and interesting option to view all information about form elements. For example if you have used text box you can check its attributes like its name, ID, type, value, label, max length etc… |
| 8 | Small Screen Rendering
(under Miscellaneous) |
This is really a remarkable feature about the current need of web 2.0 trend. It gives the idea of how your website will looks into small screen resolution like I phone, or mobile browser. |
| 9 | Mark all Links
(under Miscellaneous) |
Here you have the support for settings of links, you can make all your links either visited or unvisited depends upon the requirements. With this option you can play with link styles, hover styles etc… |
| 10 | Edit HTML (under Miscellaneous) |
It’s the great option to edit HTML in real time without the use of any third party tool like Dream weaver. And then you can save the changes as a new web page. |
| 11 | CSS | It is the first and important option for all the designers with a great support of CSS. You can view all the style sheets of the web page, but can edit CSS in real time Scenario. |
2. Firebug Add-one
Overview:
- Firebug is the most famous web development tool of the Mozilla Firefox web Browser.
- You can inspect your web page HTML and modify style and layout in the real-time. This helps you in taking vision of how your web pages look with different HTML/CSS attribute values.
- You can accurately manage the network usage and performance.
- You can get valuable information about your web page Dom, JavaScript and HTML.
Firebug is categorized in to four main features and this further categorization of each feature.
| INSPECT: Html of your Web page | ||
| No | Features | Description |
| 1. | View source Live | With the help of View Source Window you can inspect properties of individual elements.Moreover you can inspect CSS, DOM and JavaScript |
| 2. | View Changes highlighted | In JavaScript supported web pages, html elements created constantly, and they are either removed or modified. In order to inspect when, where & what changes are made, you easily view these them. |
| 3. | Instant Html Editing | You can edit HTML attributes and view their effect in real time. |
| 4. | Place mouse Cursor and Inspect Html | Visual Search: Sometimes it is not possible to locate html element, so you can inspect every element of a webpage with the help of Mouse cursor. |
| 5. | Search & you shall find | Text Based Search: Similarly html element search is available for locating the required html. |
| 6. | Copy the Source | By Right clicking to any element at any level, you have several options for copying HTML like copy inner HTML, copy x path, copy HTML. |
| LOG: With the Firebug cmd prompt you can search HTML attributes via JavaScript commands | ||
| No | Features | Description |
| 1. | JavaScript Commands | Firebug command prompt enables you to search anything via JavaScript commands. You can also use regular expressions to get your required result like HTML values or attributes etc… |
| 2. | Auto Complete | Using the tab you can auto complete the names, variables, object properties. For example document. GetElementbyID. |
| 3. | Go big | If you are sick with the single line of firebug, don’t get panic you can enlarge your screen size. |
| 4. | Book mark let Heaven | If you have written more than one line JavaScript code& want quick test result ,you can paste it on the editor and editor will automatically adjust these commands in the new window |
| 5. | Insect and Command | Simply just hitting the copy button you can create bookmark lets. |
| 6. | Don’t Forget to Right click | Context menus contain a whole world of fun, |
| DEBUG: When things go wrong, Firebug allows you to debug for the JavaScript, CSS, HTML or XML errors | ||
| No | Features | Description |
| 1. | Status bar Error Indication | At the Right bottom of the browser window there is a support of error indication with the green and red symbol. If it is green then there are no errors & if the symbol is x with red color, there will be errors displayed with specified number |
| 2. | No error soup | Firebug gives you error report specified to the web page. |
| 3. | Informative JavaScript Errors | Relevant and more Precise JavaScript Errors are displayed in the error window. Even you can view the complete description with a single click on error. |
| 4. | Filtering Errors | You can moreover filter errors , with the options like Show JavaScript Errors, Show JavaScript warnings, show CSS errors only … |
| ANALYZE: Some web pages take too much time to load but why? Firebug gives you details about each & every web page. | ||
| No | Features | Description |
| 1. | Examine Http Headers | You can examine HTTP header details with firebug. HTTP headers contain all the useful information about the website like server information, caching directives, cookie etc…; |
| 2. | Cached or Not Cached | Not every request of the user is completed; a few of them are fulfilled by browser cache. Firebug assigns the Grey color code to browser fulfilled requests. In order to examine the site is either using the cache to optimize page load times. |
| 3. | Xml http Request Monitoring | Ajax is based on the XML http Request. As Ajax is the great technology based on the fast post back mechanism. There is no visual feedback about their traveling but firebug shows you each XML Http Request along with the data posted and responded. |
| LAYOUT: Pinch and point HTML elements with CSS and the Layout panels. | ||
| No | Features | Description |
| 1. | Box Model Shading | With CSS, Every element is based on the Box model that is margin, border, padding and content. Using firebug tag; you can feel element boxes with shade in different colors inside the page. |
| 2. | Rulers and Guides | Using the layout tab you have the option of rulers and guides about the web page layout. |
| 3. | Measure Each Edge | Box model is based on the x-Html standards in order to assure cross browser platform compatibility, in this regard firebug gives you the option of visual breakdown of each box in the box model. |
| PROFILE: You can measure of JavaScript performance in the console. | ||
| No | Features | Description |
| 1. | Find Script Easily | A web project may contain a large number of code files. Firebug’s script file gives to facility to sort and organize files in an effective way. |
| 2. | Use Breakpoints in code execution time. | In order to inspect for logical errors, you can visualize the code functionality by placing Breakpoints during the execution phase. |
| 3. | Go directly to line 110 | Sometimes you want to jump direct on the required line; you can have this facility in the firebug. |
| 4. | Browser and Eval() generated code | For a certain kind of events, Firefox generates small JavaScript functions. And JavaScript created by Eval() calls appear in the list of files under the page URL that called Eval(), with a source code summary for the name. |
3. Live HTTP Headers:
Overview:
The main objective of the add-one is to get useful information about HTTP headers of the specified domain. HTTP headers form the two core elements that are HTTP request and response. HTTP headers define various characteristics of data that is requested and data that has been provided.
Request HTTP Headers:
| Index | Header Name | Description |
| 1. | Host | Domain name of the Server Example: http://www.cyberdesignz.com/ |
| 2. | User-Agent | A user agent is a client application implementing a network protocol For example: Mozilla 5.0, (Linux, x11) |
| 3. | Accept-Language | Acceptable language for response for example Accept-Language: da |
| 4. | Accept-Encoding | For example: Accept-Encoding: Compress, gzip |
| 6. | Keep Alive | Keep Alive is the connection type which is fast enough to response the request of the client. |
| 7. | Connection | What type of connection the user-agent would prefer |
| 8. | Cookie | Http cookie previously send by the Server. |
Response Http Headers:
| Index | Header Name | Description |
| 1. | Date | The date and time that the message was sent for example:
Date: Wed, 11 Nov 2001 08:12:31 GMT |
| 2. | Server | The name of the Server, Apache or IIS |
| 3. | Keep-Alive | Timeout=15; max=100 |
| 4. | Connection | Keep-Alive Connection Type |
| 6. | Transfer Encoding | chunked |
How to Use Http Live Header (Mozilla Add-one):
You can use this add-one for viewing http information about any website from the following two ways:
- First Method: Right Click on required web page, select “View page info” and on the last tab “L Symbol for Live headers”, after clicking it will give you all information about that specified domain.
- 2. Second Method: Click on the Tool menu bar and then on live headers, And view all information about the relevant website.
Benefits of using HTTP Live Header Add-one:
1. It can help in debugging web application.
2. You can see what Web server the remote site is using.
3. Can see the cookies send by the Remote site.
4. ColorZilla Add-one
Overview:
- Colorzilla assists web developers and designers to inspect colors (visually) from anywhere in the web page.
- Colorzilla gives color characteristics in RGB, Hex decimal or X and Y axis specified values. With these values you can use the specified color in any editor which is color Palette supported.
- Along with the colors, Colorzilla provides you information about each & every element in the web page just by passing the cursor on the web page.
- Quickly adjust this color and paste it into another program.
5. Image zoom Add-one
Overview:
- With the Image zoom add-one of the Firefox you can zoom any picture displayed in the Browser individually.
- Provides the following Zooming options:
- Zoom Image/ Zoom Out
- Rotate Image (+90°, – 90°, +180°, Reset)
- Custom Zooming
- Custom Dimensions
- Zoom in Percentage Ratio
- It is helpful in roaming about for the images into the web. With the real time image zooming option you can check images without downloading it into the computer.
6. Fireshot Add-one
Overview:
- Fire shot is an advanced screen capture add-one of Firefox
- It captures, edits, annotates, organize, exports and prints screen shots of your web pages.
- It’s not like that you cannot take a screen shot from the windows utility, but taking screen shot from the print screen cannot take the whole web page image, as it is longer than a browser window. So you need a fire shot.
- You can insert graphical text into your images quickly which is really helpful for web designers and content reviewers.
- Screen shots can be saved into any image formats like (PNG, JPEG, GIF, and BMP), copied into clip board, printed into hard copy & emailed to anyone.
Conclusion
We as a USA based web design company consider these kinds of latest technologies which support us in the field of web design and development. Web solutions are not that kind of easy task to just emerge the client requirements. There is an involvement of a complete process which needs excellence. Above mentioned Mozilla Firefox Add-ones are the great help for the web designing and web development process. Because it provides real time debugging and Error tracking for the code.
