Everyone who uses Firebug regularly knows the basics. They know how to inspect and edit HTML and CSS, analyze page loading times and the like. There are a few neat tricks, though, that aren’t quite immediately apparent, but are very handy.

Quickly Copy a Background URL

I like to play around with background images when I’m experimenting with a design or learning from someone else’s. This often involves copying the URL of a background image from one element and pasting it to another. It’s a pain to carefully select the URL portion of a shorthand background attribute, which is what I did until recently. As it turns out, you can just right-click the attribute and choose “Copy Image Location” or “Open Image in New Tab.” Palm, meet forehead.

Specify a Pseudo-element

If you hover over a link (or any element with a :hover pseudo-element) while Firebug is open, the right-hand pane updates to show the relevant CSS. Wouldn’t it be useful if it didn’t disappear as soon as you moved the mouse? Fortunately, you can lock the hover state with the little dropdown arrow on the Style tab. Just put a check mark next to the “:hover” option.

See the Exact Style Applied to an Element

Next to the Style tab in the right-hand pane is one labeled Computed. This is useful for working out cascading issues, or checking the exact dimensions of an element.

Console Logging

Instead of spamming alert() dialogs across your screen when you’re debugging JavaScript, you can use Firebug’s Console tab instead. Calling the console.log() function will output whatever you pass to it in the Console tab. e.g. console.log(‘hi’). There’s a page about it on the Firebug website.

To fix it, just follow these steps:

1. Open a new tab and type about:config into the address bar.
2. Search for browser.urlbar.trimURLs
3. Double click on the browser.urlbar.trimURLs key to change its boolean value from true to false.
4. Close the tab and enjoy your unhidden URL protocols.

This is the second time in two versions Mozilla has made an unhelpful UI tweak. In Firefox 6 they added “domain highlighting,” which greys-out the URL text, while leaving the domain in darker lettering. Fortunately, it was just as easy to fix.

In short:

Firefox 7 uses less memory than Firefox 6 (and 5 and 4): often 20% to 30% less, and sometimes as much as 50% less. In particular, Firefox 7′s memory usage will stay steady if you leave it running overnight, and it will free up more memory when you close many tabs.

Also, there are already some early mock-ups of what the UI in Firefox 8 might look like.

Firefox 7 is lean and fast [Nicholas Nethercote]

I find it annoying, though. It looks a bit weird, and it makes the path less visible, which is something I work with on a regular basis. If you’re like me and want to turn off the feature, here’s an easy way to do it:

1. Open a new tab and type about:config into the location bar
2. Search for browser.urlbar.formatting.enabled in the filter field. (It searches as you type.)
3. Double click on the browser.urlbar.formatting.enabled line to change the value from true to false.
4. Close the tab and enjoy your lack of domain highlighting.

Mozilla believes that the web can displace proprietary, single-vendor stacks for application development. To make open web technologies a better basis for future applications on mobile and desktop alike, we need to keep pushing the envelope of the web to include — and in places exceed — the capabilities of the competing stacks in question.

Mozilla wants to develop new APIs that would allow web-based applications to access hardware such as USB, Bluetooth, cameras, SMS, NFC and telephony. These would, of course, have a “privilege” system to ensure that potentially malevolent applications wouldn’t be able to access the hardware without your consent.

It will be interesting to see how this shakes out. Google, with Chrome OS, seems to be primarily interested in the development of cheap hardware that boots into a browser. Mozilla, on the other hand, is currently more focused on enhancing web applications to make that sort of device more viable. And some of the APIs would likely be implemented in full-featured mobile operating systems like Android and iOS sooner or later.

Boot to Gecko [wiki.mozilla.org]

Some people will probably be happy about the addition of the favicons in Firefox 4, but if you’re like me you prefer to cram as many three to five letter bookmarks in as possible, which is significantly less with the icons included. But what can be done about it?

Fortunately, someone has already whipped-up a handy extension to revert back to a text-based bookmark bar. You don’t even need to restart your browser after installing it.

Bookmarks Deiconizer [Firefox Add-ons]

They also released a list, based on automated performance testing, of the slowest performing add-ons. Apparently Firebug adds around 74% on to startup time and StumbleUpon 19%. (Unfortunately, it seems like a few of my favorite add-ons are on the list, the indispensable Firebug included.)

Mozilla plans to update their extension repository with warnings that display for add-ons that increase startup time by 25% or more.

The most noticeable change over Firefox 3.6 is that everything is so much more responsive, and pages render very quickly. The Features page on Mozilla.com lists some fairly impressive V8 and SunSpider benchmarks, which Download Squad says are slightly better than Chrome’s results. It seems like Firefox has finally caught back up to the competition, and hopefully will remain in contention thanks to the more frequent release cycle Mozilla plans to move toward.

The new “App Tabs” that you can pin to the left side (much like the Faviconize Tabs extension) are nice, as well.

The complete list of user and developer features is available in the announcement.

Fortunately, a clever developer has built a Firefox extension to solve this problem. JSONView renders a plain-text representation of the JSON object, complete with indentation and color-coding whenever you access a URL that outputs JSON data. For example, the Twitter API. If you click this link in Firefox, you will be prompted to download the file. With JSONView installed, you would see output from the following image.

If you do much JavaScript work, be sure to install JSONView. It will save you some headaches when you have AJAX requests that aren’t working quite right.

I’m already impressed by the speed improvements. The browser launches a little bit faster and overall seems more responsive. Pages seem to render a lot faster, as well.

I am a bit disappointed that the Mac version, so far at least, looks much more like Firefox 3 than the wonderful mockup from before. I really like the cleaner interface, despite it’s slight deviation from the norm on OS X.

If you want to try it out, keep in mind that it is an early beta release. Beta software is generally full of bugs and glitches, as the whole point of a beta test is to find problems so they can be fixed before the final release. Do not remove your existing Firefox installation and do not use it for anything mission-critical. Also, don’t judge the application too harshly. It will likely be much different by the time of the final release.