“Honza has made some fantastic improvements to the Net panel. John Barton has improved the Script panel and debugging features as well as tweaking the console. Maybe more significantly were some of the changes under the covers. The new Tracing panel (FBTrace) for debugging Firebug itself during development is a huge improvement over the previous console-based system. We’re starting to get some unit test coverage through John Resig’s and Honza’s FireUnit.”
Grab a copy of the extension here
Please note: it doesn’t currently work on Firefox 3.1 beta.
Over the last few months I have seen the issue of website accessibility become a much more important consideration to my company’s clients whenever we are building new websites. DDA compliance is no longer just a buzzword, it’s something clients request as an essential requirement. As such, it’s getting increasingly important for Web Developers to consider screen readers as they develop their web pages.
One useful tool for building screen reader friendly web pages is Fangs – a Firefox 3 extension that creates a text version of what a modern screen reader program would read.
I would strongly recommend that every web developer downloads this extension and gives it a try - you may be extremely surprised at the results and find that the accesible website you just built isn’t actually that accessible after all.
Robert Kieffer has released a new tool for testing JavaScript code performance.
JSLitmus is designed specifically to allow you to quickly and easily write a JavaScript test, run it on any modern browser, and document the result.
By including the JavaScript file and a single line of code per test, loading the page in your browser will give you access to the test suite. By hitting the run button you will get a break down of each test, together with a graphical chart showing the results. You can, of course, use the testing suite in different browsers to see how your code performs in them all.
Want a demo of the tool itself? You can try it out on the JSLitmus homepage.
It’s not going to solve anyone’s web development problems, but this week’s tech tool is an extremely useful bookmarking add-on to Firefox which allows you to seemlessly synchronise your bookmarks between computers. By storing your bookmarks with Foxmarks they are also backed up should your computer fail and are available online, anytime. Even if you are at a client’s computer, or on a computer with only Internet Explorer installed, the bookmarks are available from the Foxmarks website.
So why use Foxmarks instead of del.icio.us? Personally, I find Foxmarks much more user friendly then del.icio.us, with bookmarks appearing as I’d except in the bookmarks toolbar, the ability to order they hierarchically, with drag and drop and edit/delete always just a click away. It all comes down to personal preference.
Well, it happened. After all the rumours throughout the years - Google have finally released their own browser, and a lot quicker than we expected. Turns out the comic released yesterday was accidently leaked one day earlier than planned.
You can download Google Chrome from the website: http://www.google.com/chrome - what do you think?
For those who need guidance, there’s a list of Google Chrome’s features here (at the time of writing, the accompanying videos are unavailable):
http://www.google.com/chrome/intl/en-GB/features.html
And there’s a Google Chrome FAQ for web developers here:
http://www.google.com/chrome/intl/en-GB/webmasters-faq.html
Chrome’s rendering engine is WebKit, so it renders pages similar to Safari 3.1.
This page also details the tools available for developers: Web Inspector, Task Manager and JavaScript Debugger.
We’ll be following this story all week, so stay tuned for more as it develops.
Here’s a tool that’s not strictly to do with web development, but could be useful should you need to record a video demonstration with instructions on how a website works at any point.
If you’re keen on making sure your website code is perfect, then make sure you give the W3C’s HTML and CSS validator’s a try. These free web-based tools allow you to check whether your HTML and CSS files conform to the W3C specifications.
The W3C HTML validator allows you to check any online web page or upload an offline HTML page, and will return a detailed list of where your page does not conform to standards.
The W3C CSS validator can check that you have written valid CSS in external CSS stylesheets.
Finally, the W3C Broken Links report will check for any broken links.
If you’re HTML is in a mess (!!!), check out HTMLTidy, which is available both as a web based service and as a Firefox extension. HTMLTidy will remove any empty tags, correct simple errors and indent code nicely to make it more readable.
This week’s tech tool is actually a JavaScript file that makes loading Flash content onto your HTML pages incredibly easy.
SWFObject (or SWF Fix as some of you may still know it by) can detect the Flash plug-in for all major web browsers and is also very search engine friendly, degrades gracefully and creates valid HTML.

This week’s tech tool, Fiddler, is an extremely useful tool to have around when reaching the final stages of creating a website.
Fiddler is a HTTP Debugging Proxy which logs all HTTP traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP Traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.
I myself have used it many times for looking at cookie data, finding out if a particular CSS file is loading, or seeing if any of my file paths are returning 404 errors.

Fiddler’s definitely worth a look, and at the price of free - how can you go wrong?! Check it out!
Ever wondered how you could speed up your web pages? Perhaps you feel you’ve tried everything but you just can’t nail down what is taking the time to load? Enter Yahoo’s YSlow, which is actually a plugin to another Firefox plugin - Firebug. YSlow analyzes web pages and tells you why they’re slow based on certain rules. For each rule your website will be given a grade along with an explanation of why your website received that grade so that you can focus on key areas to speed up your content. A detailed description of the rules can be found here.

In the coming weeks, I’ll be looking into some of the techniques that can be used to speed up your website, but in the meantime, find out more information about YSlow here!


Recent Comments