Difference between revisions of "Browser Developing Tools"
Foxfirefey (Talk | contribs) m (→= Inspecting HTML) |
Foxfirefey (Talk | contribs) m |
||
| Line 11: | Line 11: | ||
== Firefox == | == Firefox == | ||
| − | == Firebug == | + | === Firebug === |
[http://getfirebug.com/ Firebug] is an extension that has many tools for web development. | [http://getfirebug.com/ Firebug] is an extension that has many tools for web development. | ||
| Line 17: | Line 17: | ||
To start the Firebug extension in the window you are in, go to Tools->Firebug->Open Firebug. The browser window should now show the Firebug interface at the bottom of the page. | To start the Firebug extension in the window you are in, go to Tools->Firebug->Open Firebug. The browser window should now show the Firebug interface at the bottom of the page. | ||
| − | === Inspecting HTML === | + | ==== Inspecting HTML ==== |
You'll want to be in the HTML tab. (When you look at the top of the Firebug interface, there is a list like Console, HTML, CSS, etc. If HTML isn't highlighted, click on it.) | You'll want to be in the HTML tab. (When you look at the top of the Firebug interface, there is a list like Console, HTML, CSS, etc. If HTML isn't highlighted, click on it.) | ||
| Line 23: | Line 23: | ||
This will show the HTML page as a set of collapse-able and expandable nesting tags. There is a button with an arrow over a box whose title is "Click an element in the page to inspect it" that can help you find the element you want on the HTML source. You can also click on elements in the HTML display to select them instead. | This will show the HTML page as a set of collapse-able and expandable nesting tags. There is a button with an arrow over a box whose title is "Click an element in the page to inspect it" that can help you find the element you want on the HTML source. You can also click on elements in the HTML display to select them instead. | ||
| − | === Inspecting the CSS applied to an element === | + | ==== Inspecting the CSS applied to an element ==== |
The right pane of the Firebug interface should be on the "Style" tab. When using the "click an element in the page to inspect it" feature or clicking the element inside of the HTML inspector, you select that element. | The right pane of the Firebug interface should be on the "Style" tab. When using the "click an element in the page to inspect it" feature or clicking the element inside of the HTML inspector, you select that element. | ||
| Line 29: | Line 29: | ||
CSS rules that apply to that element will then be displayed in the style tab. | CSS rules that apply to that element will then be displayed in the style tab. | ||
| − | === Editing the CSS === | + | ==== Editing the CSS ==== |
You can make simple editing changes to rules in the style tab on the right side of the interface for a selected element; you can only add or tweak rules to existing selectors though. To tweak a rule, click on the part of the rule you want to tweak--the name or value. To add a rule, click on the value of the last rule and press enter or tab; it will give you a blank box below the other rules. Type in the name and press enter, tab, or ":" to then get the box to enter the value portion of the rule. | You can make simple editing changes to rules in the style tab on the right side of the interface for a selected element; you can only add or tweak rules to existing selectors though. To tweak a rule, click on the part of the rule you want to tweak--the name or value. To add a rule, click on the value of the last rule and press enter or tab; it will give you a blank box below the other rules. Type in the name and press enter, tab, or ":" to then get the box to enter the value portion of the rule. | ||
| − | == Web Developer == | + | === Web Developer === |
The [https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Web Developer Toolbar] is a lighter tool than Firebug in helping web developers. | The [https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Web Developer Toolbar] is a lighter tool than Firebug in helping web developers. | ||
| − | === Inspecting HTML === | + | ==== Inspecting HTML ==== |
Information->Display Element Information will let you explore the different attributes of elements you hover over and then click. | Information->Display Element Information will let you explore the different attributes of elements you hover over and then click. | ||
| Line 43: | Line 43: | ||
Information->Display Id & Class Details will show all of the items with classes and IDs on the page. | Information->Display Id & Class Details will show all of the items with classes and IDs on the page. | ||
| − | === Inspecting the CSS applied to an element === | + | ==== Inspecting the CSS applied to an element ==== |
This also requires that the [https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/ DOM Inspector] extension is installed. If it is, you will see a "View Style Information" in the CSS menu of the toolbar. Use it and click on an element--the top of the page will show what element would currently be selected. | This also requires that the [https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/ DOM Inspector] extension is installed. If it is, you will see a "View Style Information" in the CSS menu of the toolbar. Use it and click on an element--the top of the page will show what element would currently be selected. | ||
| Line 49: | Line 49: | ||
A pane should open in the browser with the rules that apply to the element you clicked on. | A pane should open in the browser with the rules that apply to the element you clicked on. | ||
| − | === Editing the CSS === | + | ==== Editing the CSS ==== |
Use the CSS->Edit CSS menu option. You can edit the stylesheets and then press the green arrowed "Apply" button at the top of the interface to see your changes. If you want to revert, click the blue arrowed "Reset All" button. | Use the CSS->Edit CSS menu option. You can edit the stylesheets and then press the green arrowed "Apply" button at the top of the interface to see your changes. If you want to revert, click the blue arrowed "Reset All" button. | ||
Revision as of 19:01, 23 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.
Contents
Firefox
Firebug
Firebug is an extension that has many tools for web development.
To start the Firebug extension in the window you are in, go to Tools->Firebug->Open Firebug. The browser window should now show the Firebug interface at the bottom of the page.
Inspecting HTML
You'll want to be in the HTML tab. (When you look at the top of the Firebug interface, there is a list like Console, HTML, CSS, etc. If HTML isn't highlighted, click on it.)
This will show the HTML page as a set of collapse-able and expandable nesting tags. There is a button with an arrow over a box whose title is "Click an element in the page to inspect it" that can help you find the element you want on the HTML source. You can also click on elements in the HTML display to select them instead.
Inspecting the CSS applied to an element
The right pane of the Firebug interface should be on the "Style" tab. When using the "click an element in the page to inspect it" feature or clicking the element inside of the HTML inspector, you select that element.
CSS rules that apply to that element will then be displayed in the style tab.
Editing the CSS
You can make simple editing changes to rules in the style tab on the right side of the interface for a selected element; you can only add or tweak rules to existing selectors though. To tweak a rule, click on the part of the rule you want to tweak--the name or value. To add a rule, click on the value of the last rule and press enter or tab; it will give you a blank box below the other rules. Type in the name and press enter, tab, or ":" to then get the box to enter the value portion of the rule.
Web Developer
The Web Developer Toolbar is a lighter tool than Firebug in helping web developers.
Inspecting HTML
Information->Display Element Information will let you explore the different attributes of elements you hover over and then click.
Information->Display Id & Class Details will show all of the items with classes and IDs on the page.
Inspecting the CSS applied to an element
This also requires that the DOM Inspector extension is installed. If it is, you will see a "View Style Information" in the CSS menu of the toolbar. Use it and click on an element--the top of the page will show what element would currently be selected.
A pane should open in the browser with the rules that apply to the element you clicked on.
Editing the CSS
Use the CSS->Edit CSS menu option. You can edit the stylesheets and then press the green arrowed "Apply" button at the top of the interface to see your changes. If you want to revert, click the blue arrowed "Reset All" button.
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.
