Posts Tagged ‘Few Iceweasel (Firefox) Web Development goodies (DOM Inspector)’

Few Iceweasel (Firefox) Web Development goodies (DOM Inspector), (Web Development plugin)

Friday, July 23rd, 2010

Reading Time: 3minutes
I’m trying to enter into web dev this days and I felt obliged to share with you about 3 interesting plugins for (Iceweasel) in Debian or Firefox if you’re running Linux or some other OS platform. The DOM Inspector , Error Console and HTML Validator Plugin are an absolutely must have ones if you’re into a serious web dev.

Herein I’ll write a short review to each of the nice FF plugins to get you a slight idea about them:

DOM Inspector

The DOM Inspector (also known as DOMi) is a developer tool used to inspect, browse, and edit the Document Object Model of documents – usually web pages or XUL windows. The DOM hierarchy can be navigated using a two-paned window that allows for a variety of different views on the document and all nodes within.

To proceed downloading the plugin use the following dom inspector download link

DOM Inspector Iceweasel Firefox ScreenShot
Here is how your DOM inspector would look like.

You see as you click a node in the DOM Inspector, the element in the page is highlighted so you can easily track down layout issues and CSS problems.

It’s an interesting fact that DOM Inpector is also available as a plugin for Thunderbird

It’s use on Thunderbird is similar to the Browser use e.g. as taken from DOM Inspector’s thunderbird plugin download page:

DOM INspector – “Inspect the DOM of HTML, XUL, and XML pages, including the mail chrome.”

To install DOM Inspector on Debian’s Iceweasel Firefox fork, use:

debian-notebook:~# apt-get install iceweasel-dom-inspector

It’s worthy to mention the Error Console which is a fundamental part of the DOM Inspector

The error console allows you to view real-time javascript errors and bad CSS declarations. This is a VERY handy little feature. You can open the Error Console in Firefox by selecting the ‘Tools’ > ‘Error Console’ menu. Once opened, you’ll probably want to hit ‘Clear’ and then refresh the page you’re checking for javascript and CSS errors.

To add the dom inspector extension to Thunderbird or as the fork is called in Debian (Iceape), execute the following command:

debian-notebook:~# apt-get install iceape-dom-inspector

2. Another completely mandatory plugin for a Web Developer this days is theWeb Developer add-on plugin

This plugins has many goodies a web dev could benefit, some of the nice features it supports are:
the ability to modify and clear cookies and cache, display form details, disable enable css styles, disable page colors and tons of more handy stuff.

– Installing the Web Developer plugin on Debian again is a piece of cake with apt.

debian-notebook:~# apt-get install iceweasel-webdeveloper

There you go after restarting Iceweasel another bar field will appear in your browser, from there you can customize the web dev actions you would like to perform.

Here is a quick glimpse on the Web Developer plugin:
Web developer plugin on Iceweasel and Firefox

Besides that I suggest you check my older post which explains the importance for a website to be w3c compliant