Tools: Firefox Add-Ons: Web developer tools

Just thought of sharing the following web development tools which are very useful for our day-to-day web development activities. If you are working on any UI related issues and taking more time on fixing them then here is a way to fix them quickly on real time and also to monitor on web page performance. These tools are extensions available for Firefox browser.

Tools for tweaking HTML, CSS and debugging Javascripts:

Firebug: Add-on for UI debugging made easier. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. You can use it directly to edit the page which gets reflected on the browser as soon as it gets changed.

Using firebug, you can perform the following

* Inspect HTML and CSS - To start inspecting HTML form elements, click the Firebug icon in the lower right hand corner of the firefox browser once the plugin is installed. You can also go to Tools > Firebug > Open Firebug. Once the Firebug pane comes up, click the Inspect button. Then you can move your mouse over the page and see an outline around elements of the page. Just click on the element you need to inspect and see the section highlighted in the HTML code in the Firebug pane. Also, on the right side of Firebug is a list of CSS styles that are used by this element. You can either edit the CSS or click the stop sign to the left of a line to temporarily disable that line and view changes immediately in the browser. Also you can include new HTML elements in appropriate position and view them during runtime.

* Debug JavaScript - To start debugging JavaScripts within your web page, first open firebug and then click on script tab. Once you view the JavaScript in the script tab pane, set breakpoints by clicking on its line number. Refresh the page and once the particular breakpoint is reached, firebug opens in debug mode and you can step through the code using the debug controls on the firebug pane. By using this, we can watch variables and thier values on the right side of the pane rather making anoying alerts in identifying values passed during runtime.

Reference links: https://addons.mozilla.org/en-US/firefox/addon/1843

Tools for web page performance monitoring:

YSlow: Add-on for UI performance analyzer. YSlow analyzes web pages and tells you why web pages are slow based on Yahoo's rules (http://developer.yahoo.com/yslow/help/index.html#guidelines) for high performance web sites.

* Monitoring the web page - To start monitoring the web page, click the YSlow icon in the lower right hand corner of the firefox browser once the plugin is installed. Once the YSlow pane comes up, click on the Performance button which will generate a performance report with recommendations on enhancing the web page performance. It also provides a graphical representations on the size of each sections like HTML/Text, Javascript files, Stylesheet files, Images etc using the stats button and also provides the response time and other details for each components using the components button next to the performance button.

Reference links: https://addons.mozilla.org/en-US/firefox/addon/5369