Another feature introduced in Firebug 1.6a11 is support for back and forward navigation. This well known pattern used in all web browsers to navigate among visited web pages turned out to be quite useful for Firebug too.
See how the related UI looks like.
As expected, there are two buttons: Back and Forward, these are used to move within the history of visited Firebug panels. Right click on these buttons opens a pop-up menu with recent history entries.
In this particular case (on the screenshot), the history shows that Cookies, Net and Script panels have been recently visited. So, by pressing back at this moment, the user would be navigated to the previously selected panel - Cookies. It doesn't matter that the panel actually comes from a Firebug extension.
By pressing forward, the user would be navigated into the Script panel (again, using the screenshot example). In this case there are two history entries, since the Script panel was used to display two script files in the past.
Tracking also selected files within a panel (this applies on the Script and CSS panels) is very useful feature. Instead of using the Script Location Menu again and again to pick the target script file (pretty tiring if there is a lots of scripts on the page), the user can just press back or use the history menu to navigate faster to already visited scripts. And yes, the scroll position within the script is also tracked so, you'll end up seeing the same piece of source code as before.
The same feature is now available also in Chromebug (since it's based on Firebug code base) and very useful for navigation among chrome script files.
This post is updated to reflect changes in the specification. You need Firebug 1.6X.0a12
Firebug 1.6X.0a12 implements a new console.table method that allows output of tabular data into the Console panel. This feature was suggested by Patrick Mueller who works on webkit based on a similar feature implemented in FirePHP by Christoph Dorn.
Before diving into various scenarios and details how to use this new method, let's see a simple preview of a tabular output.
This table corresponds to a following code:
var table =
new Array
(5);
for (var i=
0; i<table.
length; i++
)
table
[i
] =
[i
+1, i
+2, i
+3, i
+4, i
+5, i
+6, i
+7];
console.
table(table
);
Read more...
I had a chance to take a closer look at a new (and I believe the first one!) book about Firebug, written by Chandan Luthra and Deepak Mittal. This book focuses on Firebug 1.5, which is the current release on AMO.
Arm yourself to destroy UI and JavaScript bugs.
After a brief introduction to Firebug and its history, the authors provide excellent and detailed description of all Firebug features (panel by panel) and so, the first half of the book represents a comprehensive reference guide for those who don't want to miss any tiny thing (gosh, I would love to have such info somehow directly accessible from within the FB UI).
The target audience is front-end web developers who are building software and pages using HTML, CSS, JavaScript, and AJAX, and want to learn Firebug. The book assumes that the reader has a very basic knowledge of HTML, JavaScript, and CSS. The examples in the book can be understood by someone who has just been introduced to web development.
The second half of the book was exciting for me. It starts with web page performance tuning and continues with description how to use Firebug for AJAX development. The last two chapters of this book are dedicated to Firebug extensions. You can find a list of some useful extensions as well as a great chapter about developing an extension of Firebug (including famous "Hello World!" example).
I think that there could have been more about how to effectively use Firebug in order to solve typical scenarios/issues, which developers meet in their daily work (improving download speed, profiling application logic, fixing design related bugs, learning unknown code & markup, etc) apart from listing all features.
Anyway, I highly recommend this book to everyone who is looking for complete and transparent overview of all Firebug features nicely explained and categorized. The book is worth reading!
I have recently written some documentation about how to write automated tests for Firebug (possibly even for Firebug extensions) and also how to run an official Firebug test suite. Here is a quick summary and a few links.
Firebug Test Doc Home
Running Automated Test Suite
Test Examples
Test API
Running Automated Test Suite
Running the official test suite is as easy as installing Firebug and FBTest (Firebug) extension.
At some point (I hope in FB 1.6), the FBTest extension will be part of Firebug developer build (with an 'X' in the name) so, running tests should be even easier.
To execute all tests:
- Open Firebug Test Console. Pick menu Tools -> Firebug -> Open Test Console.
- Put http://getfirebug.com/tests/content/testlists/firebug1.5.html URL into the URL bar (should be there by default).
- Press Run All button on the toolbar.
There are some tests that require Firefox 3.6 so, the recommended configuration (to see all green) is:
Please let us know if you see failing tests.
In order to create additional source of information for Firebug contributors and extension developers, there is new API Reference documentation generated from Firebug source code.
The source code processing is made by js-doc-toolkit, which is an extensible doc generator for JavaScript, supporting its very specifics.
Comments are based on JavaDoc like syntax and using tags like e.g. @param (check out complete list of default tags). Firebug also defines its own specific tags like: @module, @panel, @domplate that help to match its specific architecture features.
Read more...
