Feed on
Posts
Comments

These are two of the best plug-ins I have seen for Firefox.

Firebug allows you to view your site and and edit your code all in one browser tab.

firebughtml1.png

Mousing over elements on your page in this case the strapline:

  • “Free Web Design and WebDevelopment”

Highlights the relevant section of your code.

Your code is shown in two panes. The main page above can be used to show:

  • HTML
  • CSS
  • Script (on a local file you can view PHP etc.)
  • Net (shows load times for all off site elements, such as Avatars)
  • Dom (shows elements structured in the Document Object Model)

More details on the above are available at GetFirebug.com, though I would recommend downloading it from the Mozilla.org.

When viewing HTML in the main pane, a smaller pane to the right shows CSS for the element you are working on, as shown below:

firebugcss1.png

You can edit the code and see the results in the browser above, so you can go to a site you like and modify it ‘live’ using code taken directly from the web-server, then save it to a local file!

It has a lot of uses and has to be one of the best two plugin’s around, the other being Fire FTP.

As the name suggests, Fire FTP is an FTP client that runs within Firefox, allowing you to drag and drop files between your local machine and your remote server.

The screen shot below is not too clear, but shows how Fire FTP can be run in one tab whilst using Fire Bug in another.

fireftp.png

As with most FTP clients you get two panes for local and remote, refresh buttons etc.

The nice thing about Fire Bug is that you enable it one tab at a time, so, you can open three tabs, one for:

  • Your website as normal with Firebug enabled / disabled as you wish
  • Your local copy with Firebug enabled
  • Fire FTP

So from Firefox you can edit your local copy, FTP to the server and view the results on your server, all from one application!

Compare this to running a browser for view, a code editor and an FTP client (though many code editors have FTP integrated) and you will understand how much simpler the process becomes.

What you don’t get are the bag of tricks you get with many code editors, such as predictive text or WYSIWYG features.

The only problem I find using this setup is that I become even more forgetful regards testing in IE (which I still haven’t fixed this site for..).

So, two really useful, completely free tools to help you maintain your sites:

Assuming of course you already have this:

Related Posts

  • FTP to SFTP Bridge
  • Google Not Showing Supplemental Tag
  • Analyse Website Access Speeds
  • Reload Pages Automatically Firefox
  • RSS feed

    11 Comments

    Comment by Jon Lee

    I’m currently in the process of compiling a list of the top add-ons for Firefox and these two are in the list – I will be sure to link to this very nice summary of the two.

    (Comments wont nest below this level)
     
    Comment by SiteLogic

    Be sure to link back / post a comment, Ill be interested to read it, you have to love Firefox :-)

    (Comments wont nest below this level)
     
    Comment by Steve

    Jez

    These are indeed great tools. I hope to exploit them more in the future. Keep up the good work with this site.

    Cheers

    Steve.

    (Comments wont nest below this level)
     
    Comment by SiteLogic

    Hi Steve,

    Glad you finally dropped by :-)

    (Comments wont nest below this level)
     
    Comment by msdanielle

    wow this is awesome. thanks for such a great post :smile: have you encountered any real problems with it yet? and what have you used it most commonly for? just wondering…

    (Comments wont nest below this level)
    Comment by SiteLogic

    De-bugging and modiying pages, then uploading them :smile: but if your not into that, you can just ‘vandalise’ other websites when you get bored :evil: :evil:

     
     
    Comment by Everyday Weekender

    Thanks for letting me know about fireBug.. this one is new to me and I think I’ll find it very useful!

    ;)

    (Comments wont nest below this level)
     
    Comment by SiteLogic

    Its pretty cool inst it :mrgreen:

    (Comments wont nest below this level)
     
    Comment by IndoDX

    Before I decided to use FireFTP I was try several windows app. such as CuteFTP.

    But after I found FireFTP i decided to use it :mrgreen:

    Another tools to manaje my data server is use WebBased FTP such as Net2Ftp ;)

    (Comments wont nest below this level)
     

    [...] Firebug (homepage) Firebug is in my opinion, the best debugging tool for web development, miles ahead of the built-in DOM inspector. It can browser HTML, CSS, JavaScript individually as well as create break points and step through code to debug it. It also has a network monitor so you can track the load time of your site and see where the bottlenecks are. There are tons more features and Jez does a better job of explaining it (with screenshots!). [...]

    (Comments wont nest below this level)
     
    Comment by Web Design Media

    Wow…firebug is really interesing!
    I was used to Web developer addon, but it’s no match for firebug !! :grin:

    (Comments wont nest below this level)
     

    Sorry, the comment form is closed at this time.