Part of creative process during web programming and design involves streamlining and optimizing the workflow.
That means trying to make things done faster, in less time.
One tool I find really valuable is Firebug.
Download and install this javascript console and debugger for Firefox, and a new icon appears in the lower side corner of the browser.
In fact, Firebug is usually deactivated, until you click this icon and tell it to start to process the website you are seeing (you can also tell it to stay in an always active mode, but this burns cpu cycles pretty fast).
If Firebug is active, it’s capable of making you peek under the hood of the live page you are seeing, showing precisely what you want to know about the engine running. This means less trials and errors.

Firebug functions are:

  • Console: The least appariscent, the most used function. You can type and execute javascript expressions here, but more important, you got a console to put your debug messages into. No more alert(’message’)! When you want to put a message into the console, simply add a console.log(’message’) to your scripts. It can also produce a JSON rapresentation of your data and objects. It’s really cool. AJAX and AHAH calls are shown as expandable console lines, you can see the full request and the server answer.
  • HTML: Here you can see your HTML tree, traverse it while graphically see the page elements. No more adding border:1px solid red; to your CSS to search for that strange behaving div. Pressing the Inspect button locks and shows data about the element under the cursor, that you can even modify clicking Edit. The HTML tab of Firebug even shows the interactive modifications of the page (DHTML animations and AJAX content loads). For each element you can see it’s box model properties and the DOM attributes.
  • CSS: This is an inline CSS editor, you can disable and modify interactively style attributes, even on multiple files. However, I do not use it very much, I prefer the CSS editor of the Web Developer Toolbar. But disabling a style interactively without deleting the corresponding line is very cool, indeed. At closer examination, it appears that however this CSS editor in Firebug has full autocomplete capabilities. Albeit I still prefer the other one, I think this is worth saying.
  • Script: Here you can set breakpoints (stop the script at a position) and see scripts on the page. You can even add a watch expression (display interactively a variable or an expression result).
  • DOM: This lists all the Javascript Document Object Model for the page. You can see every object attributes and even dive into his childs.
  • Net: Last but not least, this function shows exactly how much time is spent loading page elements, including latency and cached requests. It’s a must if you wish to optimize your page for speed. Guess what, I discovered the theme I’m has a missing file while looking at the Firebug Net graph!

Update:Firebug Lite enables you to use Firebug’s console on other browsers, like Safari or Internet Explorer, without throwing out errors on each console.log(); call!

Technorati Tags: , , ,