Difference between revisions of "Browser Developing Tools"

From Dreamwidth Notes
Jump to: navigation, search
(Editing the CSS)
(Firefox)
 
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
This page describes helpful in-browser development tools to help you learn, develop, and debug with HTML and CSS.
+
This page describes helpful in-browser development tools to help you learn, develop, and debug with HTML and CSS. (You might also be interested in the [[HTML Primer]], [[CSS Primer]], and [[Browser Support Policy|list of supported browsers]].)
  
 
They do this in general by:
 
They do this in general by:
Line 11: Line 11:
 
== Firefox ==
 
== Firefox ==
  
=== Firebug ===
+
Firefox has built in browser developing tools under the "Web Developer" section of the menu on the URL bar (or under the Tools menu on Mac OS X).  Click "Toggle Tools" and the tool pane will appear.
  
[http://getfirebug.com/ Firebug] is an extension that has many tools for web development.
+
[https://developer.mozilla.org/en-US/docs/Tools Here is the manual]
  
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.
+
If you are used to Firebug, which is the ancestor of the web developer tools, [https://developer.mozilla.org/en-US/docs/Tools/Migrating_from_Firebug they have a transition guide]
 +
 
 +
== Chrome ==
 +
 
 +
To open up the developer interface in Chrome, use this menu item: View -> Developer -> Developer Tools
  
 
==== 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 Elements tab.  (When you look at the top of the Chrome developer interface, there is a list like Elements, Resources, Network, etc.  If Elements 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.
+
This will show the HTML page as a set of collapse-able and expandable nesting tags.  There is a button at the bottom of the interface with a magnifying glass whose title is "Select an element in the page to inspect it." that can help you find the element you want on the HTML source by hovering over the page and clicking.  You can also click on elements in the elements 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 Chrome Developer interface should have the "Styles" section expanded.  When using the "Select an element in the page to inspect it" feature or clicking the element inside of the elements inspector, you select that element.
  
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 styles section of that pane.
  
 
==== 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 editing changes to rules in the Styles section on the right side of the interface for a selected element.  To tweak a rule, double click on the part of the rule you want to tweak--the name or value.  To add a rule to a selector, double 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.
  
To make more overaching changes, go to the "CSS" tab of the Firebug interface, find the stylesheet you want to make changes to, and click the "Edit" button.  You'll then be able to type anywhere in the original stylesheet and see the changes happen.
+
To add a selector, find the gear button on the right side of the Styles section heading.  Click to open the menu and select "New Style Rule".  You can then edit your new rule.
  
 
Remember that changes made in this interface will NOT be saved!  In order for them to actually show up as a permanent change, you will need to add them in some other way.
 
Remember that changes made in this interface will NOT be saved!  In order for them to actually show up as a permanent change, you will need to add them in some other way.
  
=== Web Developer ===
+
== IE ==
  
The [https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Web Developer Toolbar] is a lighter tool than Firebug for helping web developers.
+
Tools -> Developer Tools or F12
  
 
==== Inspecting HTML ====
 
==== Inspecting HTML ====
  
Information->Display Element Information will let you explore the different attributes of elements you hover over and then click.
+
You'll want to be in the HTML tab.  (When you look at the top of the Developer interface, there is a list like HTML, CSS, Console, etc.  If HTML isn't highlighted, click on it.)
  
Information->Display Id & Class Details will show all of the items with classes and IDs on the page.
+
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 ====
  
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 toolbarUse it and click on an element--the top of the page will show what element would currently be selected.
+
The right pane of the Developer interface should be on the "Style" tabWhen 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.
  
A pane should open in the browser with the rules that apply to the element you clicked on.
+
CSS rules that apply to that element will then be displayed in the style tab.
  
 
==== 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 changesIf you want to revert, click the blue arrowed "Reset All" button.
+
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 thoughTo tweak a rule, click on the part of the rule you want to tweak--the name or value.
  
 
Remember that changes made in this interface will NOT be saved!  In order for them to actually show up as a permanent change, you will need to add them in some other way.
 
Remember that changes made in this interface will NOT be saved!  In order for them to actually show up as a permanent change, you will need to add them in some other way.
  
== Chrome ==
+
== Safari ==
  
To open up the developer interface in Chrome, use this menu item: View -> Developer -> Developer Tools
+
If the Develop menu does not appear in the menu bar, open Safari preferences, click Advanced, and select "Show Develop menu in menu bar".
 +
 
 +
To open up the developer interface in Safari, use this menu item: Develop -> Show Web Inspector
  
 
==== Inspecting HTML ====
 
==== Inspecting HTML ====
  
You'll want to be in the Elements tab.  (When you look at the top of the Chrom developer interface, there is a list like Elements, Resources, Network, etc.  If Elements isn't highlighted, click on it.)
+
You'll want to be in the Elements tab.  (When you look at the top of the Safari developer interface, there is a list like Elements, Resources, Scripts, etc.  If Elements 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 at the bottom of the interface with a magnifying glass whose title is "Select an element in the page to inspect it." that can help you find the element you want on the HTML source by hovering over the page and clicking.  You can also click on elements in the elements 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 at the bottom of the interface with a magnifying glass whose title is "Select an element in the page to inspect it." that can help you find the element you want on the HTML source by hovering over the page and clicking.  You can also click on elements in the elements display to select them instead.
Line 77: Line 83:
 
==== Editing the CSS ====
 
==== Editing the CSS ====
  
You can make editing changes to rules in the Styles section on the right side of the interface for a selected element.  To tweak a rule, double click on the part of the rule you want to tweak--the name or value.  To add a rule to a selector, double 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 editing changes to rules in the Styles section on the right side of the interface for a selected element.  To tweak a rule, double click on the part of the rule you want to tweak--the name or value or selector.  To add a rule to a selector, double 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.
  
 
To add a selector, find the gear button on the right side of the Styles section heading.  Click to open the menu and select "New Style Rule".  You can then edit your new rule.
 
To add a selector, find the gear button on the right side of the Styles section heading.  Click to open the menu and select "New Style Rule".  You can then edit your new rule.
Line 83: Line 89:
 
Remember that changes made in this interface will NOT be saved!  In order for them to actually show up as a permanent change, you will need to add them in some other way.
 
Remember that changes made in this interface will NOT be saved!  In order for them to actually show up as a permanent change, you will need to add them in some other way.
  
== IE ==
+
== Opera ==
  
Tools -> Developer Tools or F12
+
First you will need to install [http://www.opera.com/dragonfly/ Dragonfly].
  
== Safari ==
+
To open up the developer interface in Opera, use this menu item: View -> Developer Tools -> Opera Dragonfly
  
If the Develop menu does not appear in the menu bar, open Safari preferences, click Advanced, and select “Show Develop menu in menu bar.
+
==== Inspecting HTML ====
  
== Opera ==
+
You'll want to be in the DOM tab.  (When you look at the top of the Opera Dragonfly interface, there is a list like DOM, Scripts, Network, etc.  If DOM isn't highlighted, click on it.)
  
[http://www.opera.com/dragonfly/ Dragonfly]
+
This will show the HTML page as a set of collapse-able and expandable nesting tags. Make sure that the button of the mouse arrow labeled "Find an element by clicking" is highlighted bright green and on. You can find the element you want on the HTML source by hovering over the page and clicking.  You can also click on elements in the DOM display to select them instead.
 +
 
 +
==== Inspecting the CSS applied to an element ====
 +
 
 +
The right pane of the Opera Dragonfly interface should have the "Styles" section expanded.  When using the "Find an element by clicking" feature or clicking the element inside of the DOM inspector, you select that element.
 +
 
 +
CSS rules that apply to that element will then be displayed in the styles section of that pane.
 +
 
 +
==== Editing the CSS ====
 +
 
 +
You can make editing changes to rules in the Styles section on the right side of the interface for a selected element.  To tweak a rule, double click on the rule you want to tweak.  To add a rule to a selector, put the cursor at the end of the text box of a rule you are currently editing after the ';' and press enter or tab; it will give you a blank box below that rule to enter a new one in.
 +
 
 +
Remember that changes made in this interface will NOT be saved!  In order for them to actually show up as a permanent change, you will need to add them in some other way.
  
 
[[Category: Styles]]
 
[[Category: Styles]]
 
[[Category: Development]]
 
[[Category: Development]]

Latest revision as of 00:58, 4 February 2020

This page describes helpful in-browser development tools to help you learn, develop, and debug with HTML and CSS. (You might also be interested in the HTML Primer, CSS Primer, and list of supported browsers.)

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

Firefox has built in browser developing tools under the "Web Developer" section of the menu on the URL bar (or under the Tools menu on Mac OS X). Click "Toggle Tools" and the tool pane will appear.

Here is the manual

If you are used to Firebug, which is the ancestor of the web developer tools, they have a transition guide

Chrome

To open up the developer interface in Chrome, use this menu item: View -> Developer -> Developer Tools

Inspecting HTML

You'll want to be in the Elements tab. (When you look at the top of the Chrome developer interface, there is a list like Elements, Resources, Network, etc. If Elements 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 at the bottom of the interface with a magnifying glass whose title is "Select an element in the page to inspect it." that can help you find the element you want on the HTML source by hovering over the page and clicking. You can also click on elements in the elements display to select them instead.

Inspecting the CSS applied to an element

The right pane of the Chrome Developer interface should have the "Styles" section expanded. When using the "Select an element in the page to inspect it" feature or clicking the element inside of the elements inspector, you select that element.

CSS rules that apply to that element will then be displayed in the styles section of that pane.

Editing the CSS

You can make editing changes to rules in the Styles section on the right side of the interface for a selected element. To tweak a rule, double click on the part of the rule you want to tweak--the name or value. To add a rule to a selector, double 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.

To add a selector, find the gear button on the right side of the Styles section heading. Click to open the menu and select "New Style Rule". You can then edit your new rule.

Remember that changes made in this interface will NOT be saved! In order for them to actually show up as a permanent change, you will need to add them in some other way.

IE

Tools -> Developer Tools or F12

Inspecting HTML

You'll want to be in the HTML tab. (When you look at the top of the Developer interface, there is a list like HTML, CSS, Console, 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 Developer 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.

Remember that changes made in this interface will NOT be saved! In order for them to actually show up as a permanent change, you will need to add them in some other way.

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".

To open up the developer interface in Safari, use this menu item: Develop -> Show Web Inspector

Inspecting HTML

You'll want to be in the Elements tab. (When you look at the top of the Safari developer interface, there is a list like Elements, Resources, Scripts, etc. If Elements 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 at the bottom of the interface with a magnifying glass whose title is "Select an element in the page to inspect it." that can help you find the element you want on the HTML source by hovering over the page and clicking. You can also click on elements in the elements display to select them instead.

Inspecting the CSS applied to an element

The right pane of the Chrome Developer interface should have the "Styles" section expanded. When using the "Select an element in the page to inspect it" feature or clicking the element inside of the elements inspector, you select that element.

CSS rules that apply to that element will then be displayed in the styles section of that pane.

Editing the CSS

You can make editing changes to rules in the Styles section on the right side of the interface for a selected element. To tweak a rule, double click on the part of the rule you want to tweak--the name or value or selector. To add a rule to a selector, double 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.

To add a selector, find the gear button on the right side of the Styles section heading. Click to open the menu and select "New Style Rule". You can then edit your new rule.

Remember that changes made in this interface will NOT be saved! In order for them to actually show up as a permanent change, you will need to add them in some other way.

Opera

First you will need to install Dragonfly.

To open up the developer interface in Opera, use this menu item: View -> Developer Tools -> Opera Dragonfly

Inspecting HTML

You'll want to be in the DOM tab. (When you look at the top of the Opera Dragonfly interface, there is a list like DOM, Scripts, Network, etc. If DOM isn't highlighted, click on it.)

This will show the HTML page as a set of collapse-able and expandable nesting tags. Make sure that the button of the mouse arrow labeled "Find an element by clicking" is highlighted bright green and on. You can find the element you want on the HTML source by hovering over the page and clicking. You can also click on elements in the DOM display to select them instead.

Inspecting the CSS applied to an element

The right pane of the Opera Dragonfly interface should have the "Styles" section expanded. When using the "Find an element by clicking" feature or clicking the element inside of the DOM inspector, you select that element.

CSS rules that apply to that element will then be displayed in the styles section of that pane.

Editing the CSS

You can make editing changes to rules in the Styles section on the right side of the interface for a selected element. To tweak a rule, double click on the rule you want to tweak. To add a rule to a selector, put the cursor at the end of the text box of a rule you are currently editing after the ';' and press enter or tab; it will give you a blank box below that rule to enter a new one in.

Remember that changes made in this interface will NOT be saved! In order for them to actually show up as a permanent change, you will need to add them in some other way.