It also enables viewing the properties and styles of each element and trace styles of elements to its declaration. It allows viewing the source of the entire page, color coded for ease of navigation, or selected elements of it, as well as view the DOM source and the CSS selectors that are applied to the element.

It allows validating of CSS and HTML, previewing page layout at various resolutions, and offers a ruler (measuring in pixels) to aid in positioning the elements. Internet Explorer Developer Toolbar (sometimes shortened to IE Developer Toolbar or even IE DevBar), is an add-on for Internet Explorer 6 and Internet Explorer 7 that aims to aid in design and debugging of web pages. Internet Explorer Developer Toolbarįirefox has Firebug and webdeveloper to fire out all the bug in Mozilla, IE has developer toolbar! This toolbar created by Microsoft and gives most of the ability of both Firebug and webdeveloper but not all of it. In a previous article I talk about The Essential Firefox Add-ons for Web Designers, this article continues to mention for the content on the browser of Microsoft Internet Explorer. There is also a Firebug Lite version for Internet Explorer, Opera and Safari.In general, Firefox and Safari are favorite browsers of designer, however Internet Explorer and Opera are many people use for their design work, because it hass integrated into the operating system or simply just because they like to use it.The edited HTML or CSS or JavaScript wont effect the existing code.By going to any web page press f12 then you can see the window at the bottom of the page.Network Monitor breaks up the traffic on a file-by-file basis so we can see how much time is spent loading image, JavaScript, HTML, and so forth. Use the Net tab to see the bar that shows when a file started and stopped loading relative to all other files. Network Monitor : This Feature lets you monitor how much time is spent when loading a web page.JavaScript : using firebug we can debug the JavaScript code by putting breakpoints & can also log the errors.CSS, HTML : In live we can edit the CSS & HTML of any web page & can view the result.It also has a JavaScript console for logging errors and watching values, as well as a “Net” feature which monitors the amount of time in milliseconds it takes to execute scripts and load images on the page. FIREBUGįirebug is an open source extension for the Mozilla Firefox Browser, which provides tools to monitor, edit, and debug any website’s CSS, HTML, DOM, and JavaScript. Note : This post is first published on Dec-2010 in my previous blog Techkindle.

Download firebug lite for ie