All posts tagged ‘firebug’

File Under: Browsers, Software

Firebug 1.5 Adds More Web Developer Tricks to Firefox

Firebug, the developer tool for debugging JavaScript, tweaking CSS, and inspecting network traffic, has announced a major new release — Firebug 1.5.

Firebug is a Firefox extension that turns your browser into a JavaScript debugging powerhouse. It eases the web development process by providing console interfaces, XmlHttpRequest tracking, live HTML and CSS editing and all sorts of other useful information about what your pages are doing (or not doing). Firebug is so popular with web developers there are even extensions for the Firebug extension — sort of meta-extensions if you will. Yahoo’s YSlow and Google’s Page Speed are the most popular.

The latest release of Firebug improves the add-on’s stability, adds several new features and makes Firebug compatible with the soon-to-be-released Firefox 3.6, which is expected next week.

Among the updates in Firebug 1.5 are a much-improved Inspector tool, which allows you to select any element on the page and see the HTML and any applied CSS rules; and several major new features for the Net panel, which can debug XMLHttpRequests. For a complete list of everything new in Firebug 1.5 be sure to check out the release notes on the Firebug wiki.

To grab a copy of Firebug 1.5, you can head to the Get Firebug site, or wait for the update to show up on the Mozilla add-ons website. The Firebug blog says the latest release should be on the Mozilla site next week (if you want to try Firebug betas or stay at the bleeding edge of Firebug development, we recommend installing the add-on through the Firebug site).

Firebug works wherever Firefox does, but be aware that, if you’re using Firefox on 64-bit versions of Linux, some users have reported problems with Firebug 1.5.

See Also:

Blackbird Tool Makes JavaScript Alert() Debugging Obsolete

If you’re debugging JavaScript, you’ll probably be interested in something a little more comprehensive than alert(). Blackbird adds some control and specificity to the debugging messages you install into your code to see if it is working. It also makes the debugging window a little more controllable than the error message that pops up for an alert().

It does so by adding a floating black table (seen to the right) that you can use to log different errors and data points throughout your code. It makes debugging a cinch, and it helps you figure out what you’re doing wrong in a much more visible manner than adding alerts.

Blackbird is installed by adding a link in your page to some lightweight, downloadable JavaScript and CSS. Open the pop-up logging window using the F2 key. Other F2 variations will move the window, make it larger and close it.

The developers of blackbird promise you’ll never use alert() again. Check out the Blackbird webpage for code and live examples of the coding box and the kind of messages you can install in your page.

This isn’t a replacement for other debugging tools, like Firebug. However, unlike Firebug and like HTML design debugging tool XRAY or Firebug Lite, it works over any modern browser without a software installation.

See Also

File Under: Software & Tools

Firebug Flies Out of Beta

Firebug logoIf you’ve been waiting for an official release to install the latest Firebug, wait no more. Version 1.2 of the popular web developer extension for Firefox is no longer in beta. You can download Firebug at the Firefox add-ons site.

John Resig, one of the new Firebug team members, has a great rundown on what’s new. Resig is always on the lookout for performance issues and he brings up an important one with JavaScript debugging. Whenever script debugging is on anywhere, every page runs JavaScript about 25% slower, even those without Firebug enabled. Now you can right-click (or ctrl-click) the Firebug icon and choose “suspend Firebug” when you’re done using the script console. Expect the Firebug team to look into this performance issue.

Those who haven’t been enjoying the beta will need to completely remove the previous version before installing Firebug 1.2. Otherwise, the update is just a click (maybe three) away. If for some reason you’ve avoided Firefox 3, the new Firebug even works in Firefox 2, but you’re still missing out on FF3.

Want to get down to business with Firebug and learn how to use Firebug extensions, too? We have an excellent Firebug tutorial.

See also:

File Under: Software & Tools

Resig Brings Structure to Firebug

FirebugJQuery creator and Firebug contributor John Resig posted a gameplan for the next few versions of everybody’s favorite developer extension. Resig says version 1.2 will come out of beta in a week or two, and work on 1.3 is already underway.

Firebug is a web development tool for tweaking CSS, debugging JavaScript and more. It is like juiced-up “view source” for seeing how others put a site together. Firebug really shines when used to streamline your own development.

In the last year, as the application surged in popularity, Firebug had some stumbles. It crashed in Firefox 3 builds. Sometimes it hangs. Resig lays out a plan to build a more stable Firebug:

  • Document Firebug internals
  • Create tests to protect against bug from new code
  • Track the performance using Firefox’s tools

Reading between the lines, it sounds like Firebug as a code base is a little disorganized. It quickly became a major part of every developer’s toolset and it receives many patches to its 35,000 lines of code.

Resig is still new to the project. His eyes are fresh and he seems to have the passion to make a better tool. If his past projects are any indication, big stuff is coming for Firebug.

See also:

File Under: Software & Tools

The 5 Best Firebug Extensions

The popular Firefox web development extension Firebug does some pretty cool stuff out of the box: Debug JavaScript, tweak the CSS, and see all the network traffic.

Firebug extensions are a sort of meta-extension that lets you add on to Firebug. Developers are adding some features that we’re starting to find hard to live without.

Here we’ll lay out our five faves.

1. YSlow

YSlow performance results

We’ve written about YSlow before. It measures your site’s speed against Yahoo’s rules for high-performance websites. It generates a little report card that analyzes your page’s events and components, pointing out which pieces of the page are causing the most problems.

It’s worth a glimpse into YSlow from time to time, even if you feel like your site is performing well. You may still find improvements to make, and if not, at least you’ll pat yourself on the back with your good score.

Download YSlow

2. Firecookie

Firecookie shows list of cookies in Firebug

Firecookie shows all the cookies being accessed by the current web page. You can see when one has been changed, and you can alter your cookie settings for accepting or denying cookies right from the Firebug panel.

I like the cookie access in Firefox 3′s new Page Info screen, but pairing cookies with Firebug just makes sense. One of the best things about Firebug extensions is that they can bring all your debugging to one place.

Download Firecookie

3. FirePHP

FirePHP: PHP debugging in Firebug

Speaking of bringing all your debugging to one place, I never would have imagined I needed FirePHP, but now I love it. It brings PHP debugging into Firebug using special “X-FirePHP-Data” headers that are invisible in the browser. FirePHP requires a PHP library to send the debugging messages.

There’s a similar extension for Cold Fusion called ColdFire. We haven’t tried it, and they aren’t listed on the Firefox extension site, so proceed with caution.

Really, there’s no need to have a different extension for each programming language. I’d rather see a standard, language-agnostic version. Then, any language could send header data to Firebug.

Download FirePHP

4. Pixel Perfect

Pixel Perfect help you be just that

Okay designers, this one’s for you. Pixel Perfect helps you create designs that are just right. You can overlap a partially transparent mockup above your actual web page. Then use Firebug’s standard CSS controls to find just the right settings to make the design pixel-perfect.

Download Pixel Perfect

5. Rainbow

Rainbow adds colors to your code

First a warning: Some people have experienced problems with Firebug when using this extension. It’s worked fine for me.

The aptly named Rainbow color-codes your code. For example, JavaScript variables are green, reserved words are blue. The coloring is sure useful when you have hundreds of lines to read.

Download Rainbow

If you’re interested in more Firebug extensions, Jan Odvarko keeps a list of them. Of course, you could also write your own Firebug extension.

See also: