Developer Tools for Browsers

16
Jun

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.

Firefox Add-ons

Firebug

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/
JavaScript-code live and apply the changes to the “real” source later. You can easily find specific object class names, ID's and details such as link paths, tab index values and so on. The extension also analyzes the queries of a website so you can determine how long the files of your website are loading. Firebug is a must-have extension for web developers because it has everything you need to develop and finalize your web-project.
Link: https://addons.mozilla.org/de/firefox/addon/1843

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.
Link: https://addons.mozilla.org/de/firefox/addon/60

NoScript

NoScript gives you the possibility of disabling all scripts/plugins on a website. This is very helpful when you're developing a rich internet application (RIA) with JavaScript-frameworks (like MooTools, jQuery, Scriptaculous and so on) or interactive Flash-content — the development of alternative content is quite easy with NoScript because you can see how your website looks like if JavaScript or/and Flash is disabled.
Link: https://addons.mozilla.org/de/firefox/addon/722

JSView

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.
Link: https://addons.mozilla.org/de/firefox/addon/2076

MeasureIt

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.
Link: https://addons.mozilla.org/de/firefox/addon/539

ColorZilla

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.
Link: https://addons.mozilla.org/de/firefox/addon/271

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).
Link: http://www.microsoft.com/downloads/details.aspx?...

DebugBar

DebugBar is an advanced web development tool for Internet Explorer which is similar to the IE Developer Toolbar. The extension allows you to inspect the DOM/JavaScript of your website and inspect the HTML-code while viewing the page. You can easily inspect an element by dragging a crosshair onto the destination element of your website.
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.
Link: http://www.debugbar.com

Opera

Opera Dragonfly

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/
JS-analysis
and an exposure of the CSS Box Model. Dragonfly allows the user to easily inspect elements on a website by clicking them directly or by clicking their code-snippet in the sourcecode. The toolset also includes an error console (for JavaScript/CSS errors) and a command line that accepts user commands. So Dragonfly is another well done tool for web development that eases debugging and improving your code.
Link: http://www.opera.com

Article postedPosted in @ 06/16/08

Comments