How To-46: "How to Access Useful Web Development Tools"

How to Access Useful Web Development Tools

from wikiHow - The How to Manual That You Can Edit

Have you ever seen a neat feature on a web site but do not know how to imitate it yourself? Well by using a nifty little tool from Mozilla Firefox you can view the source code and style sheets for any website you like!
The HTML in the source code and style sheets can help start you in the right direction.

Steps

1. Download and install Mozilla Firefox. Click on this link Firefox Add-ons.
   
• Click on the "Extensions" tab
  
• Click on "Developer Tools" - located on the left hand side of the window.
  
• Type "Web Developer" in the search box .
  
• Click "Search."
  
2. Scroll down the screen until you see "Web Developer 1.0.2." Click on "Web Developer 1.0.2."
   
3. Click "Install Now" after a window prompting you to install appears. Close the Extensions box that appears after download is complete. Close all open Firefox windows.
   
4. Open new Firefox window.# Navigate to the site whose source code and style sheet you would like to view.
   
5. Click "View Source" on the tool bar and click "View Source" on the menu that drops down.
   
6. Look to see a window with the HTML source code for the present page appear. Next view the style sheet for the page.
   
• Click "CSS" on the tool bar.
  
• Click "View CSS" on the menu that drops down.
  
7. Notice that a new tab opens in Firefox with the style sheet code.

Tips

• After you restart Firefox, if the web Developer ToolBar does not automatically appear, right click on the address bar and click "Web Developer ToolBar."
  
• Once you are comfortable viewing and analyzing source code and style sheets, try out the other development tools available in the tool bar such as playing around with a web site's images (making them invisible) or using the outline feature to see what parts of the web site are in tables.
  
• If you just want to view the HTML you can use any text editor and most browsers.
  
• For just seeing HTML in a browser it should be under either right click, view or options.
  
• For seeing HTML in a text editor just direct your chosen editor to open the html web page.

Warnings

• Be sure to close all Firefox windows after the download is completed. The Web Developer Toolbar will not appear until after Firefox is completely restarted.

Things You'll Need

• A computer with Internet capabilities
  
• Mozilla Firefox as a web browser(for all listed features) OR almost any internet browser OR a text editor(one as simple as notepad will do).

Related wikiHows

• How to Repair Internet Explorer
  
• How to Maximize the Speed of Your Internet Connection
  
• How to Police Your Kids on the Internet
  
• How to Restrict Web Browsing Using Internet Explorer
  
• How to Appraise Domain Names
  
• How to Block a Website in Internet Explorer

Sources and Citations

• Firefox Add-ons

Article provided by wikiHow, a collaborative writing project to build the world's largest, highest quality how-to manual. Please edit this article and find author credits at the original wikiHow article on How to Access Useful Web Development Tools. All content on wikiHow can be shared under a Creative Commons license.