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 ...")
 
(Firefox)
Line 12: Line 12:
  
 
[http://getfirebug.com/ Firebug]
 
[http://getfirebug.com/ Firebug]
 +
[https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Web Developer Toolbar]
  
 
== Chrome ==
 
== Chrome ==

Revision as of 00:25, 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 Web Developer Toolbar

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