Browser Developing Tools

From Dreamwidth Notes
Revision as of 08:18, 16 April 2011 by Ninetydegrees (Talk | contribs)

Jump to: navigation, search

This page describes helpful in-browser development tools to help you learn, develop, and debug with HTML and CSS.

They do this in general by:

  • Letting you hover over elements and view the section of HTML it is hovering over
  • Showing the CSS rules that are applying to a particular element
  • Letting you edit the HTML and CSS on the fly to test out a certain effect without the overhead of saving the file to the server

They have more advanced uses, but these are the ones this tutorial focuses on.

Firefox

Firebug

Web Developer Toolbar

Chrome

View -> Developer -> Developer Tools

IE

Tools -> Developer Tools or F12

Safari

If the Develop menu does not appear in the menu bar, open Safari preferences, click Advanced, and select “Show Develop menu in menu bar.

Opera

Dragonfly