Testing and debugging are important tasks when developing a website. So there are many browser tools which help you to fix and improve your XHTML/CSS/JS-code. The tools are available as plugins or extensions for popular web-browsers so you just have to install those tools additionally.
Of course, most of the web-development tools are available for Firefox because there’s a great community. But there are also some other helpful tools you may use in order to develop your next web-project.
Firebug is the ultimate package that contains lots of development tools that are used in realtime when browsing on a website. So you can edit your DOM/HTML/CSS/
Web Developer Toolbar
The Web Developer toolbar is very similar to Firebug — it's a useful collection of development tools that are built to analyze, monitor and edit your web-code. You can easily access the CSS/JS-files of a website so that you don't have to crawl the whole sourcecode of a site in order to find the CSS-link. The extension comes with lots of predefined shortcuts that ease your development.
This extension allows you to view all dependencies of a website, including CSS- and JS-files. JSView lists all the related files in a menu so that you can just view the code in your favorite editor.
MeasureIt is a very useful extension when you need to know pixel accurate ranges or areas. The extension allows you to draw a ruler rectangle (on a website while viewing it) that shows the amount of pixels (width/height) you've drawn with the rectangle. This helps a lot when you have to move HTML-elements (like DIV's) around exactly.
If you need to determine hexadecimal color codes of your website, you should use this extension. With ColorZilla you can get color readings from any point in your browser, zoom the page and even measure distances between two points on your page. The extension even has DOM spying features so you can get various information about DOM elements of your website.
Internet Explorer Plugins
Internet Explorer Developer Toolbar
The Internet Explorer Developer Toolbar from Microsoft is similar to Firebug for Firefox — the plugin allows you to analyze and modify the DOM/HTML/CSS/JS-code of your website while viewing it (Live-Mode). So you can locate and select specific HTML-elements on your webpage and view the object class names and details. You can easily find the style rules of an element and reload the page with the changed values so the debug-task is a great fun. The plugin is installed as a separate plugin and can be pinned to the Internet Explorer browser window or floated separately. This small tool is very important when developing websites for the Internet Explorer because the browsers have different renderings. The plugin works with Internet Explorer 6, 7 and 8 (Beta).
The extension has everything you need to debug your code — you can also edit CSS-styles and add new definitions to your CSS-code. DebugBar also gives you common information of the website (referrer, protocol, charset and so on) including whether the page is in Quirks Mode or normal mode.
The latest version of Opera (v9.5) includes a complete web development toolset called “Dragonfly” which enables a lot of helpful tools including DOM-inspection, HTML/CSS/