Two Trusty Tools for Web Development

This short blog is to recommend two tools for Firefox that have proven valuable to me on those occasions when I have been doing website development – especially with CSS, but also now with JavaScript. As web-dev is not really my main role, I’m confident that I’ve only scratched the surface of what they can do.

Web Developer

Web DeveloperThe Web Developer add-on by Chris Pederick adds a toolbar to Firefox. In particular, I’ve found the menu options that allow for outlining of certain types of elements (e.g. block-level elements, tables or table cells) very helpful, and in addition the Resize options (which resize your browser to a specified pixel dimension) is a godsend for those of use who have screens much larger than those of the intended audience. The screenshot shows Block-level elements outlined – a nice way to get a feel for the way a page is constructed.

Firebug

FirebugI’ve only started to use Firebug recently, and the reason for the recommendation was the scripting debug capabilities and the console for scripting commands. But again, I’ve only scratched the surface of what it can do. Initially, the Firebug interface consists only of a small tick or cross at the bottom-right of the Firefox window. This indicates the status of any scripting on the page. Clicking on that icon opens up a substantial window area (inside the main Firefox window by default, but it can be detached) where most of your work will be done.

Firebug ConsoleFirebug has a mode called ‘Inspect’, where waving your mouse pointer over the web form will highlight the html code that created that element, and the css hierarchy that controls its appearance. As usual, the screen shot has lost the mouse pointer – so just imagine I’ve got the pointer over the 1.05 version number – the outline has been added by Firebug.

But the Console and Script debugger are the reasons I was introduced to this tool. The second screenshot shows a very simple interactive session where I type javascript commands and get interactive feedback on the results of those commands. It;s a great way to test script commands before committing to a script block. You can also put break-points and step through script that is on the page.

Summary

I hope I’ve encouraged you to try these tools if you haven’t already!

Leave a Reply

Your email address will not be published. Required fields are marked *