14 DAY TRIAL // Not so long ago, Mozilla realized that it needs to cater to developers more, especially since it's such a community friendly company. So it started building some developer tools inside Firefox.
None have been as gorgeous as the new Web Inspector in Firefox 10 Aurora. The tool, as the name would suggest, enables you to inspect a web page and find out about its structure, elements and so on.
"Mozilla is building a collection of stable, fast and usable developer tools that ship with the browser. I’d like to introduce a collection of improvements that are scheduled to be released in final form on January 31, 2012," Mozilla's Kevin Dangoor wrote.
This isn't exactly revolutionary, Chrome has had a similar feature for ages. But the Mozilla implementation is very, very well designed. Granted, it has far fewer features than Chrome's web inspector, but it's a good start.
All the elements are picked up and highlighted as you hover your mouse above them, you get a small indicator showing whether you're highlight a paragraph, a link, an image and so on.
You have to see it in action to fully appreciate it. The new Web Inspector is more than just pretty though, it's rather useful as well. When you activate it (CTRL+SHIFT+I) you'll see a breadcrumb bar at the bottom.
It gives you a quick view of where you're at in the HTML structure and also makes it possible to move up and down the hierarchy. For any selected element, you'll see its parents all the way up to the top HTML file and its children.
That's not all, you can also activate the HTML panel which gives you access to the direct source code and also enables you to find and select elements from the code rather than visually from the page.
There's a CSS panel as well, which, like the HTML one, enables you to see the styles that apply to the particular element you have highlighted.
Existing web developer tools are getting an update as well, for example, the Scratchpad which has been recently introduced now uses the Orion code editor to provide a much more useful way of hacking JavaScript code, thanks to syntax highlight and other similar features.