Web development
Raiting:
6

Firefox add-ons for web development


Today, I would like to talk about Firefox add-ons for the web development that can extend the browser’s core functionality, because I believe that these add-ons are very important for any web developer and web designer.

Many of these add-ons you already know!

Let's start with the most popular and powerful a wed development tool:

1. Firebug

image

Firebug is a web development tool that facilitates the debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript; it also provides other web development tools.[2] Firebug's JavaScript panel can log errors, profile function calls, and enable the developer to run arbitrary JavaScript. Its net panel can monitor URLs that the browser requests, such as external CSS, JavaScript, and image files. The net panel can display both request headers and response headers for each page asset.

2. Web Developer

image

Why is the browser so inconvenient for the web development?

It is simple the users are not the developers. The Web Developer is created for this purpose. I guess I don’t have to do any introduction in terms of this one. Whether you need to inspect the CSS of page, discover information about a webpage (such as seeing all the alt attributes of images on the page), quickly validate a web design for W3C compliance or measure design elements, Web Developer will likely have a convenient tool for you..

3. Firepicker

image

Firepicker automatically adds color picker to Firebug's inline CSS editor.

Previously, Stylizer program was very topical, but firebug + firepicker are much more universal and both free.

4. PixelPerfect

image

Pixel Perfect is a firebug extension that allows web developers to easily overlay a web composition over top of the developed html. It is very simple and easy to use.

5. cssUpdater

image

cssUpdater is a plugin for Firebug which allows you to automatically save changes made in Firebug to your CSS file, which is going to be a massive time saver.

The following 2 plug-ins I refer to the controversial, but you need to know about them. They have something.

Option A:

- Edit CSS in Firebug
- Press Sync (or alt + s)
- Reload the page and make sure that the changes are updated!

Option B:

If cssUpdater is fit for file changes on the local machine, between your IDE and the browser, then FireFile works directly with css file server. It uses a script for this purpose that needs to be filled on the server. This plugin may be too new, but it is very convenient.

FireFile

Of course, there are cases where css is made up of the different files. Do not forget to backup css before the test. Anything can happen.

6. PageSpeed

image

Page Speed is a tool that improves the performance of the web pages. It’s a Firefox add-on integrated with Firebug. When you run Page Speed, you get immediate suggestions on how you can change your web pages to improve their speed.

For example, Page Speed automatically optimizes images for you, giving you a compressed image that you can use immediately on your web site. It also identifies issues such as JavaScript and CSS loaded by your page that wasn't actually used to display the page, which can help reduce time your users spend waiting for the page to download and display.

yslow

This is another Yahoo’s development.

7. FireCookie

image

Firecookie is an extension for Firebug that allows viewing, managing and debugging the cookies in your browser. Apart from all the other cookie managers and viewers available as Firefox extensions, this one is made as an extension for Firebug. This means that the web developers have the functionality accessible within the familiar Firebug's UI.

8. CSS Usage

image

CSS Usage is an extension for Firebug (thus requiring you to have Firebug installed) that uncovers unused CSS style rules. It works by identifying the CSS you use and don’t use. It points out what unnecessary parts can be removed to keep your CSS files as lightweight as possible.
MeLavi 26 july 2012, 16:43
Vote for this post
Bring it to the Main Page
 

Comments

Leave a Reply

B
I
U
S
Help
Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute