Firebug 1.9 has been released yesterday. It will be the main version for all Firefox versions up until Firefox 12, when Firebug 1.10 will take over. The first 1.10 alpha is expected to be released in the coming week.

A blog post at Mozilla Hacks details the changes and new features that the developers have built into Firebug 1.9.

The Firebug windows, originally displayed at the bottom of the browser window can now be displayed at all four sides of the browser window. It is furthermore possible to detach it from the window. The option can be interesting for users who work with widescreen monitors or on multi-monitor systems.

Another interesting new feature is the syntax error positioning, which now highlights the exact position in a line of code where an error occurred. Instead of having to check the code manually, that’s now done automatically by the extension.

A new column in the Net panel is now displaying the protocol of a connection. This offers some interesting options, for instance the ability to check if a secure site is sending all items with the https protocol.

A font viewer and font tooltips have been added to the web development extension as well. Tooltips work by simply hovering the mouse cursor over font information ina style sheet. The Font Viewer instead can be used to check all fonts that are loaded by a page, provided they are in woff format.

Check out the blog post for additional information and details about Firebug 1.9. Interested Firefox users can download the latest version from the official Mozilla Add-ons repository.

Codeburner, a free tool for the two web browsers Firefox and Opera, the Mac OS X operating system and Adobe Air offers another option. The web development reference offers quick lookups of HTML properties and CSS elements. Depending on the version installed, it looks slightly different.

Firefox users for instance can select to install it as a separate Firefox add-on or as a Firebug extension. The Firefox add-on places a search form in the status bar that can be utilized to search for properties and elements.

codeburner

Just enter a search term in the form and hit enter. The Codeburner window will expand from the bottom and display various information about the element or property.

The add-on displays compatibility information about the property by default, with the option to display code examples in another sidebar on the same page.

html css reference

Links are provided for more information online and to view a live demo. Both lead to the Sitepoint webmaster portal and are opened in new tabs.

Codeburner has also been integrated into the context menu. It is here possible to select an element on a page to display all of its properties. It is furthermore possible to open a full web page in the Codeburner window to see all elements used on that page.

Firefox users can change the behavior in the preferences. Here it is possible to remove options from the context menu and status bar, detach the Codeburner window from the browser, define keyboard shortcuts for the add-on, configure syntax colors and processor chunks, which determines the cpu utilization of the add-on.

Codeburner offers a solid reference for both HTML properties and CSS elements. Especially the integration in the Firebug add-on may appeal to many web developers, as they usually have Firebug installed. (via Techyard)

We would like to encourage you to post additional tips and hints about website manipulation in the comments of this article so that the page becomes as comprehensive as possible. All methods of manipulating websites have been tested with Firefox 3.5x and 3.0.x. Most will probably also work in previous versions of the web browser.

1. Userscripts and Greasemonkey

Greasemonkey and its userscripts are probably the most popular and known method of manipulation website contents in real time. Thousands of userscripts exist that add, remove or modify elements and features of web services. Some classic examples are changing the design of Gmail, adding new features to the Internet Movie Database IMDB or skipping the wait time at popular file hosts.

Generation of scripts requires web development knowledge, especially of html, JavaScript and CSS as these are used to alter the contents of the websites.

2. Platypus – Modify Websites Without Programming Skills

Platypus allows a user to modify websites with any programming skill requirements. This limits the reach of the Firefox add-on a bit as it is not possible to reach the depth of Greasemonkey. Possible options are to permanently remove elements from websites, change style attributes, change the font and background colors to black and white or to remove fixed sizes and positioning on a page.

3. Stylish – Modify CSS

The Stylish add-on for Firefox and its accompanying userstyles directory provide access to new styles that manipulate the CSS of a website.It can be used to remove, add, move and manipulate elements on a website permanently. The screenshot above shows the popular Atistic Google userstyle.

4. Yet Another Remove It Permanently

Yet Another Remove It Permanently is an add-on for the Firefox web browser that makes it possible to remove elements on websites permanently. Can for example be used to remove advertisement from Google Search results or images from websites. Basically any element can be removed with this add-on. A similar add-on is Nuke Anything Enhanced.

5. Firebug

Firebug is first and foremost an add-on for Firefox that presents lots of useful information to web developers. What many do not know is that it comes with the capabilities to manipulate elements on a website. It is probably not the first choice for this kind of manipulations but this comes in handy when testing different kinds of layouts, color combinations or fonts.

6. NoScript and Adblock Plus

Both the NoScript and the Adblock Plus add-on for Firefox are primarily being used to prevent scripts and advertisements from being displayed on the user’s computer monitor. This does make them limited tools for modifying websites.

7. Aardvark

Aardvark can be used to isolate or remove elements from websites.Has been primarily been designed to remove unneeded elements before printing a website.

Verdict:

There are definitely a lot possibilities to modify websites in Firefox; Certainly more than have been mentioned in this post. Probably the easiest possibilities are in the form of Greasemonkey. If you know of any additional add-ons that should be mentioned let us know in the comments.

The Page Speed tab can be used to analyze the active website. A website optimization report will be generated that groups the findings into priorities. The high and medium priority groups list elements that should be optimized to increase the performance of the website. Low priority items on the other hand are fully or partially optimized items that can still provide some performance gains but not as much as the medium or high priority items.

Each entry is listed with a short description, priority and an expanding area that lists the elements that are affected and optimization tips on how to resolve the issue. This usually requires some research on how to implement the optimization, the Page Speed homepage is usually a good starting point as it contains some tips on how to resolve some of the issues. Some issues cannot be solved by the webmaster at all, like compressing or combining externally loaded JavaScript.

The Page Speed Activity tab on the other hand displays a timeline of all browser activities including JavaScript processing which makes it easier to spot scripts and elements that are increasing the loading times.

The data is divided into blocks that define elements like network latency, DNS lookups, connection establishment, and JavaScript processing.

Widerbug is a tweaked version of Firebug that has been specifically designed for widescreen monitors. Instead of dividing the computer screen vertically it divides it horizontally by displaying the Firebug information in a sidebar on the right side of the web browser. This is good news for web developers who use widescreen monitors to work on their web development projects.

A previous installation of Firebug has to be uninstalled from the web browser before Widerbug can be installed to avoid complications. The web development application can then be installed and uses the same shortcuts as Firebug with the only difference that the screen is opening in the right pane.

The only possible problem that users could run into are update delays as the developer of Widerbug needs to update his extension whenever Firebug gets updated.

“The alpha release includes the initial implementation for the JavaScript Debugger, CSS Inspector, DOM Inspector, Command Line and the Error Console, as well as the Scope module, which allows Opera Dragonfly to communicate with the Opera browser.”

Developers get quick access to every open window in Opera this way. Tabs provide access to Scripts, DOM and the Console. It’s not yet on the same level as the Firebug extension for Firefox. What I really like in Firebug is the fact that I can click on elements in the website and that the CSS attributes of that element are then displayed.

The Opera team has released this alpha version mainly to receive feedback from the community to improve Opera Dragonfly. Feedback can be given at the Dragonfly Feedback Page.

To do this you simply right-click the green Firebug icon in the status bar and select “Disable Firebug for mail.google.com”. Another option offered by Google would be to disable certain features of Firebug while visiting Gmail. Those are the Show XMLHttpRequests and Disable Network Monitoring options.

I was not able to verify any slowdowns with Firebug and was not able to verify any speed ups after disabling Firebug when visiting Gmail. I suppose some users can experience them and this is why I thought it would be nice to post this information.

To disable the options in Firebug you do the following:

1.Click the green or red icon in the bottom right corner of the browser window to open Firebug.
2.Click the Console tab.
3.Select Options.
4.Uncheck Show XMLHttpRequests.
5.Click the Net tab.
6.Select Options.
7.Check Disable Network Monitoring.

Firebug is actually a great web development extension for Firefox which does also list all objects that are loaded with their full url on the server. I suppose you are already seeing where this is going, huh ? You just have to take a look at the objects and filter out the largest files which are most of the time the media files. Copy the url from that file and paste it into your download manager to download the mp3, video or other media file.

Let me give you an example on how to download a mp3 right from myspace. Make sure you have the firebug extension installed.

Visit myspace.com and click on a band’s website, e.g. http://myspace.com/theused
Open Firebug by pressing F12
Play a song
Check the NET tab in Firebug and search for the biggest file
Copy the location of that file (by right-clicking it) and paste it into your download manager.
Rename the file and give it the right file extension, in this case .mp3

This method can be used on almost every other site that offers media files. Want some examples ? Gametrailers, Myspace, Youtube, Armor Games and many more. It is not working with sites that stream content to your PC (like Internet Radio but all others should be fine.)