All posts tagged ‘firebug’

File Under: Browsers, Programming, Software & Tools
Jul
29
2011

New, Improved Firebug Works with Firefox 5+

By

Firebug, the popular web development add-on for Firefox has released version 1.8 with a host of new features and compatibility with Firefox 5.0. More important, for those of you using the Beta and Aurora Firefox channels, the Firebug 1.9 alpha line has been released with support for Firefox 6 through Firefox 8. The alpha release will obviously be less stable, but if you want Aurora and Firebug it’s your only option.

If you’ve already got Firebug installed it should auto update shortly. If you’d like to take the latest version for a spin, head over to the Get Firebug site.

Much of the work in Firebug 1.8 went into behind the scenes optimizations and speed improvements, but there are some notable new features as well, including a revamped HTML Preview in the Net panel, some new DOM Panel options and better CSS color tooltips with rgba, hsl and hsla values.

For more details on the major new features head over to the Mozilla Hacks blog. To see a complete list of everything that’s new in Firebug 1.8, check out the release notes.

See Also:

Tags: ,
File Under: Browsers, Software
Sep
8
2010

Page Speed Add-on Headed to Chrome

By

One of the most useful browser extensions for web development is coming to Chrome.

Google is working on a Chrome version of its Page Speed add-on. Page Speed is an essential tool for testing sites in Firefox. It breaks down all the stuff on your page and shows you how long everything is taking to download, execute and render. It’s also fully open source and it has its own SDK.

Matthew D. Steele, one of the key engineers at Google responsible for Page Speed, has confirmed that a Chrome version is “already in the works,” and will be ready within a couple of months.

Page Speed currently runs inside of Firebug on Firefox, and there is already Firebug Lite for Chrome. There’s no word yet on whether Page Speed will remain dependent on Firebug (Lite) once it moves into Chrome, or if it will be a stand-alone add-on, but we’ll find out more details soon. In the meantime, if you have an answer to that mystery, let us know in the comments.

If you are curious about using Page Speed to speed up your website, check out Scott’s recent post on using Page Speed and YSlow together.

See Also:

Tags: , ,
File Under: Browsers, CSS, JavaScript
Feb
15
2010

Build Better Pages With Firebug

By

Ask web developers to name their desert island Firefox extensions (ignoring for now the improbability of having a laptop while stranded), and they’re bound to put Firebug at or near the top of their lists.

Firebug is a web development tool for tweaking CSS, debugging JavaScript and more. In part, it’s like juiced-up “view source” for seeing how sites are put together. But Firebug really shines when it’s used to streamline your own development.

The extension’s slogan is “web development evolved,” which is apt, given how much it changes one’s approach to web work. The tools available in the standard installation of Firebug are super. Coupled with additional functionality available via Firebug extensions (sort of meta extensions, which add on to Firebug itself), you may feel like you have evolved.


Continue Reading “Build Better Pages With Firebug” »
Tags: , ,
File Under: Browsers, Software
Feb
5
2010

New Firebug Lite Adds Web Dev Tools to Any Browser

By
The developers of Firebug, the popular Firefox add-on for web developers, have released a new beta of Firebug Lite, the lightweight version of Firebug that works in any browser. This new version is a significant update to Firebug Lite. While the full power of Firebug still requires Firefox (see our coverage of the recently released Firebug 1.5), Firebug Lite 1.3 adds some great HTML and CSS debugging tools to any browser, including IE6+, Opera, Safari and Google Chrome. The lastest beta release of Firebug Lite — which is bookmarklet script that you can add to your browser’s favorites bar — features significant speed boosts and many improvements to the HTML and CSS inspectors. The visual interface of Firebug Lite has also been revamped to match that of Firebug 1.3. For more details on everything that’s new in the Firebug Lite 1.3 beta be sure to check out the release notes. Google’s Chrome browser gets some special attention in the latest release, with a new Firebug Lite beta extension that makes Firebug Lite feel like a part of Google Chrome. The Chrome extension still lacks the JavaScript debugger and the Net Panel found in Firebug proper, but otherwise is behaves much like Firefox version. For other browsers Firebug Lite 1.3 remains a bookmarklet with the same functionality — if not the UI integration — of the Google Chrome version. If Firefox isn’t your bag, or if you don’t need the JavaScript debugging tools of Firebug, the Lite version has you covered and will work in the browser of your choice. Keep in mind that this is a beta release, though we encountered no problems during our testing. See Also:
Tags: , , ,
File Under: Browsers, Software
Jan
20
2010

Firebug 1.5 Adds More Web Developer Tricks to Firefox

By
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:
Tags: , ,
File Under: Programming, Software & Tools, Web Basics
Oct
16
2008

Blackbird Tool Makes JavaScript Alert() Debugging Obsolete

By
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
Tags: , , ,
File Under: Software & Tools
Aug
26
2008

Firebug Flies Out of Beta

By
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:
Tags: , , ,
File Under: Software & Tools
Aug
12
2008

Resig Brings Structure to Firebug

By
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:
Tags: , ,
File Under: Software & Tools
Jul
18
2008

The 5 Best Firebug Extensions

By

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:

Tags: , ,
File Under: Software & Tools
Jul
17
2008

Firebug Gets Dedicated Team

By
Firebug bug logoFrequent readers know how much we Webmonkeys love Firebug, the Firefox extension that makes web development a little easier. Today we learned that Mozilla created a Firebug team to improve the extension. That’s good news for Firebug and all of us that depend on it. Jan Odvarko is a long-time Firebug contributor. He wrote the Firebug extension tutorial and has been a member of the Firebug Working Group, which has representatives from Yahoo and Google, among others. John Resig is the creator of jQuery and a self-described JavaScript ninja. He has been an evangelist for Mozilla and will now be spending half of his time working on Firebug innovations. Here is John’s announcement post. Multi-talented programmer Rob Campbell rounds out the new Firebug team. Rob worked on unit testing with the release engineering team for Firefox 3. He’ll now be working on Firebug full-time. Rob also announced this change on his blog, where he declared himself a Firebuggist. Considering the talent on the Firebug team, we’re expecting big things and looking forward to what these guys come up with. See also:
Tags: ,
« OLDER POSTS