Difference between revisions of "Browser Developing Tools"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) (→Firefox) |
(Info for IE + minor edit) |
||
| 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] | [https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Web Developer Toolbar] | ||
| Line 19: | Line 20: | ||
== IE == | == IE == | ||
| + | |||
| + | Tools -> Developer Tools or F12 | ||
== Safari == | == Safari == | ||
Revision as of 08:18, 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
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.
