Firebug 1.3 and 1.4 alpha - what's new and interesting?

If you are a professional web developer and are constantly dealing with the development and debugging of complex AJAX applications, you probably know and use Firebug , a Firefox browser plugin designed for debugging and researching web applications. Its current version, 1.2x, is fairly stable and functional to help with 99% of the problems that may arise during development. But this tool is not devoid, if not of flaws, then of some features that could facilitate the work. And even the perfect tool can be made even more perfect, no matter how it sounds.



Not so long ago, if you go to the main official Firebug page , I found two small surprises there . The first is the next generation beta version, version 1.3. And the second surprise - the developers are thinking not only about the near future, but even further - the alpha version 1.4 is also available immediately. But what's new and interesting, we now consider.



Firebug 1.3



One of the major changes and additions to this version is the Tracing module. It allows you to track all changes in the behavior of both the browser and other plug-ins, the state of the cache, track operations with CSS and DOM, and more. In fact, this is a logger (and quite detailed) of all events that occur in the browser. The module is very useful for debugging both web applications and browser components or extensions, as it works at a higher level (or deep) than just Firebug itself. In order not to drown in a sea of ​​messages, a flexible setting is provided for what to intercept and display in the log.

')





The JavaScript debugging module has also undergone modifications, in particular, the source code display structure has been modified in order to work more effectively with large files. This is good, as it was sometimes difficult to work with libraries like ExtJS (especially the debug version) because of the braking on such a large code. The remaining changes are aimed at improving the work of the debugger in the case of working with closures (it is described in more detail in this article ), which is equally important when working with complex JavaScript constructs.



The tab, where all the DOM-objects of the page are displayed, now lists the list in alphabetical order (um, but I didn’t even notice how it used to print something).



The Net tab, which helps to monitor the network activity of the application, is now also significantly expanded and redesigned, without even needing to be a super professional to start using its innovations - it has simply changed before our eyes and now it is a real tool for optimizing web applications. Now for each component we have collected and displayed detailed processing statistics - how long it takes to create a connection to the server, send a request, wait for a server response, transfer the data itself. In addition, we can track two main events in the “life” of the page - the DOMContentLoaded event signals that all the data for DOM generation is loaded (I'm not sure, but it looks like this event is only in Firefox / Gecko), and then the onload event is generated ( window object), which tells the application that everything is ready for work. With the new panel, we can see the time spent on each stage, as well as the timestamps of each component (relative to the events described above). With such information, we can perform subtle operations on tuning and optimizing both the server and the client in order to reduce the page display time.







Among other changes: improvements for developers of extensions for Firebug, localization is improved (although there is no Russian language among them) and about 40 detected errors are closed.



I note that there are two versions being offered for installation - with and without the Tracing Console module, so if you are not developing plugins or researching the inside of the browser, you can install the regular version. The console has not yet been fully tested and can cause the browser to freeze, especially if you have enabled tracking of many events in the options.



Firebug 1.4



This version is a further development of version 1.3 and, despite the fact that so far only the alpha version, it can already be used in real work (which I did). While the developers claim that in this version they focus on extension developers (both for the browser and for Firebug itself), it is stated that there will be an improved CSS Explorer, an improved editor for various data types in order to correctly display the different data transmitted over the network ( extension panel net). The good news for designers is that it is planned that changes to CSS styles can be immediately saved back to the server in the original file.



The full list of plans for 1.4 is laid out in the SVN version of the source code here , and there are a lot of interesting things, of course, not everything will be implemented in this version, something will become irrelevant, but even if some of the described will be implemented, Firebug will again confirm the title of the most powerful tool for debugging and researching AJAX web applications.