A couple of years ago when a designer set a rule in CSS and expected it to be applied to a specific element there was no way to confirm that it worked except for viewing it in the web browser. And sometimes a rule would work in one browser but not in another. To correct it the designer had to place obvious markers in the CSS rules, like a very evident background, and continue to guess at changes which may get the style to be applied to the web page (a trail and error method).
The same has been in the case of Javascript too. With Firefox you could use the console to view errors, but few people went beyond that. With Internet Explorer it was possible to start the Visual Studio debugger and go the code step by step (but the licensed copy of Visual Studio is affordable?). Here is another area where things have changed for the better.
Here the story begins! In September, 2005 everything changed. Chris Pederick released the Web Developer extension for Firefox. It went way beyond any other web development tool ever did before. The Web Developer extension adds a menu and a toolbar to the browser with many options, such as Cookies, CSS, Forms, Images, Outline, Resize and other lot of handy options. You could access a great deal of information from the web browsers perspective and see how Firefox was interpreting the information you were providing to render the page. It instantly became the ultimate web development tool.
This was responded positively by Microsoft. The development and release of the beta of IE Developer Toolbar in March of 2006, which offered many of the same features that the Firefox extension provided. Given that a vast majority of website visitors are using Internet Explorer, this was a welcome release. It also provided features related to images, outlining, validation and others. Perhaps the most useful feature is the DOM Explorer which allows you to walk a tree view of the markup structure while the rendered window draws an outline around the currently selected element. And while it is selected you can view all of the information about the node, include the CSS class name and rules applied to that element (isn’t good?). It is extremely powerful when working with a complex web page. You can even use the ‘Select Element by Click’ feature which allows you to click on elements in the rendered window to jump right to that element in the tree view.
Both of these web browser add-ons provide many of the existing tools we already had like validators for HTML and CSS and more.
The Web Developer extension is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux. This is a ‘must possess’ tool by a web developer to make his life easy. Install and explore…
Groton
28°
Loading ...
