Codeception

Musings & ramblings of a Pythonista

New set of Developer Tools in Firefox

My friends at work were using Google Chrome for Debugging web pages saying that Chrome's Developer Tools are superior to Firefox. But starting with the new Aurora update Firefox Developer Tools looks way cooler with the new Page Inspector, Style Editor and Scratchpad.

The all new Right Click -> Inspect Element feature lets you select any HTML element and see the HTML code or Styles associated with it in clean Developer-Friendly manner.

Inspect Element

Breadcrumbs of the HTML tags are also provided by the Page Inspector.

Breadcrumbs

You can also switch to a 3D view of the HTML Document to see how elements are organized.

Document View

Using the Style Editor, you can edit the CSS dynamically and see the effect instantaneously without reloading your web service.

Style Editor

And finally for testing Javascript code snippets, there is Scratchpad which also sports code highlighting.

Scratchpad

I find it quite useful and intuitive. How about you?

Tagged under Firefox, Tips, Hacks, Debug

blog comments powered by Disqus