- WEB STARTUPS
- WEB JOBS
- ALL TOPICS
10 Useful Tools to Develop, Monitor, Evaluate or Debug Web Pages
When it comes to developing websites and pages we could all use a little help now and then when it comes down to the real detail. Fortunately there’s a wide variety of tools on offer to developers that can be of use when it comes to developing, monitoring, evaluating and debugging web pages. Here are 10 which I’ve found useful over the years.
Web developer toolbar
The Web Developer Extension adds a menu and a toolbar to the browser.
For anyone who uses Firefox that’s interested in accessibility and CSS web development, this is an essential must-have for testing web pages!
Click here to download the web developer toolbar.
Web accessibility toolbar
The web accessibility toolbar is available for Internet Explorer.
It can perform virtually any accessibility test on a web page, such as HTML and CSS validation, colour checking, HTML structure analysis, and much, much more!
Click here to download the web accessibility toolbar.
Firebug is an extension to the Firefox web browser and is an indispensable tool to any web developer.
Click here to download the Firebug extension.
Yslow is a plug-in which is integrated with the Firebug web extension for Firefox.
It’s a great tool to help reduce the number of HTTP requests needed to render a page.
It analyses the web page and summarises the page’s components, displays statistics and suggests ways to improve its performance.
Click here to download the Yslow extension.
Fangs is an extension to the Firefox web browser.
It renders a text version of a web page similar to how a screen reader would read it. It also provides a list of headings and links that are on the page. It helps to quickly find out if there are any accessibility issues on a web page for screen reader users.
Click here to download the Fangs extension.
Aardvark is an add-on for Firefox browser.
It outlines any elements over which you hover your cursor and displays the HTML tags and the CSS styles of the elements selected.
It also has one fantastic feature that makes it worth installing – a page clean-up prior to printing. Simply select the area of the page you want to print (usually the main content area) and it’ll ensure that only this gets printed, resizing it perfectly on to the paper.
Click here to download the Aardvark extension.
IETester is a free web browser that contains different versions of Internet Explorer, from 5.5 through to 8.
Now you can test websites in multiple versions of Internet Explorer all through just one browser!
Click here to download the IE tester program.
It’s essentially just a very basic screen magnifier bundled in with Windows XP.
It is great if you want to quickly check how your site looks through a screen magnifier.
Check out this program on your PC at Start > Programs > Accessories > Accessibility > Magnifier.
Xenu’s Link Sleuth
Xenu is a handy freeware tool that checks for any broken links on a site.
Simply type in a URL and it will check the links on every single page of the website.
Dead links can come about due to links on external websites going down, a file being moved or someone typing in the wrong URL. Whatever the reason, Xenu will find those dead links for you and tell you on which pages they are on. Isn’t that great!?
Click here to download Xenu’s Link checker.
The Dust-Me Selectors is an extension for Firefox web browser.
It lists all the used/unused CSS selectors from all the stylesheets on a web site. It’s a handy tool when times come to tidy up and reduce files size.
Click here to download the Dust-Me extension.
It can be difficult to decide on which plug-ins and extensions to use as a developer, but this list should point you in the direction of some really helpful tools. Having these programs in your arsenal could help you out no end when it comes to developing, monitoring, evaluating and debugging web pages.
This article was written by Brigitte Simard a web developer at the user experience consultancy, Webcredible. Brigitte’s passionate about improving the accessibility of websites and is responsible for a variety of CSS design projects and accessible CMS implementations.