Like every web developer I’ve spent a lot of time using the Firebug extension to Firefox in my day-to-day development. I’ve found it interesting to see how my development methodologies have changed with access to that tool.
Unsurprisingly, my personal development style mirrors much of the general web dev public. But what I find most interesting is to try and track trends in web development that Firebug has single-handedly revolutionized.
Console logging with object introspection
alert() function) however Firebug gave us something significant: The ability to click and introspect into logged objects. This includes the ability to click DOM nodes (and see their properties and methods) and even normal objects (like Arrays or Object literals).
Current Styles / CSS Rules
There had existed some tools for examining the current CSS style values of a DOM element (such as its dimensions and positioning) but Firebug brought a whole new level of inspection: The ability to see which stylesheet rules were introducing specific styling on an element. Not to mention the ability to edit the rules in-line (along with disabling them outright).
This level of inspection completely overhauled Web Design – and has been able to detach many web designers from their IDE-of-choice into a more agnostic view of CSS design. Absolutely the biggest short-coming of this feature is its inability to work cross-browser (although, that argument can certainly be used for most Firebug features).
While XMLHttpRequest use existed prior to the existence of Firebug it was horribly hard to debug – it was rarely obvious where errors were occurring – on the client-side? on the server-side? in the transmission? The ability to see how the requests occurred – and very importantly – how long they took (and even how frequently they occurred!) has done much to improve the overall quality of Ajax use on web pages.
I’d argue that these trends wouldn’t be where they are right now if it weren’t for Firebug – and that tools are the primary reason for a development strategy’s success. As a corollary look at the relative success of web standards – I’d argue that adherence to HTML or CSS wouldn’t be where it is today without the tools to verify a page’s compliance.
How to Improve
The question now becomes: What are the next set of tools that Firebug can introduce that will revolutionize its respective areas of development?
I’d like to propose a couple, possible, areas of interest:
Visual Performance Profiling
Application performance profiling is rather clumsy right now, we have a number of disparate resources (network performance, rendering performance, script performance) that we need to mentally merge to create a full picture of what’s happening. To counter this I’d like to propose a way of visually viewing how components of a site affect its overall performance. Perhaps a way to break things down like this:
The YSlow Firebug plugin already provides some level of analysis on your site – but it’s much more holistic (giving you generic tips for files and pieces of code). Whereas a more specific approach would be greatly appreciated.
We currently have the ability to view XMLHttpRequests as they occur, which is great, but some additions could be made that would serve to be quite helpful, such as:
- The ability to manipulate a request and re-submit it. If you’re attempting to see how different inputs will affect your site, this would be a great way to play back requests or see how they can be best improved.
- Right now Firebug only lets you know the basic textual output that’s coming from the server-side. Having it be able to tell you if incoming XML, JSON, or even HTML is syntactically correct (and even being able to navigate the resulting structures – as the browser would see them) would be a huge boon. As it stands it can be quite frustrating to receive a slightly-malformed response from a server and be stuck trying to figure out what’s going wrong.
- Better JSON/JSONP integration is essential. There are a large number of Ajax requests being done through dynamic script tag injection – and those are completely unmonitored by Firebug’s XMLHttpRequest tracking. Being able to see what requests and responses look like – and where errors may be occurring – would be immensely useful.
Rendering Performance Analysis
Virtually all of these questions are un-answered and we need a tool to help provide a solid response.
Security is one area that has seen virtually no attention in the respect of user tools. Most developers have no idea how secure their web site is or how vulnerable it may be to attacks. There needs to be easily-accessible tools for testing:
- SQL Injection attacks
- XSS Injection
- Susceptibility to Spoofing (Data Encryption)
At the very least. The problem here is that while these tools will be incredibly useful for developers to improve their web sites – it’ll also encourage malicious behavior. Although, arguably, those that wish to be malicious already have the tools to do so.
Inline support for analyzing the standards-compliance of a page. Being able to see notes next to specific elements, attributes, CSS rules, etc. that show information on how they don’t comply with particular standards – or even how they could be improved to match standards.
I think that compliance should go a step further, as well, and look to provide information on Microformat and RDFa compliance – pointing out specific errors and helping sites to become better formatted.
Finally – RSS and Atom standards compliance. Notifying a developer that their site’s RSS/Atom feed is malformed would allow them to immediately make a more compliant feed (a common area of mistakes).
Internet Explorer Support
The final, and perhaps most difficult, item that should occur would be a port of Firebug over to Internet Explorer. Both Safari and Opera have web developer tools integrated into their browsers – however Internet Explorer still consumes a majority market share and there’s no good tools in sight. (I, personally, use CompanionJS but it’s still a far cry from the full suite of utilities that Firebug provides – especially in the realm of DOM/CSS.)
Not only do I want to see Firebug improve – it’s imperative that Firebug continue to improve, for the sake of web developers everywhere. If it simply stalls and works into a stasis of bug fixes then web developers will be stuck with the current set of tools for quite some time. While other browsers are improving at a rapid pace, it’ll still be quite some time before they are able to match the current feature-set of Firebug.
Since so much of web development ecosystem is currently linked to the health of a single tool advances have to be made now and they have to be made quickly in order for the web to flourish and survive as a development medium.