Difference between revisions of "Browser Developing Tools"

From Dreamwidth Notes
Jump to: navigation, search
(Created page with "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 ...")
(No difference)

Revision as of 00:24, 16 April 2011

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

Chrome

View -> Developer -> Developer Tools

IE

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