WebFund 2013W: Web Develper Tools: Difference between revisions

From Soma-notes
Line 14: Line 14:
In this tutorial, use one or both of these toolbars to examine the following pages:
In this tutorial, use one or both of these toolbars to examine the following pages:


* [http://homeostasis.scs.carleton.ca/~soma]
* [http://homeostasis.scs.carleton.ca/~soma Anil's home page]
* [http://www.google.ca]
* [http://www.google.ca Google's front page]
* [http://www.amazon.ca]
* [http://www.amazon.ca Amazon's front page]
* [http://maps.google.ca]
* [http://maps.google.ca Google Maps]
* [http://www.bing.com/maps Bing Maps]


For each of these pages, look at:
For each of these pages, look at:

Revision as of 17:09, 25 January 2013

Tutorial Note

This tutorial is optional. Your primary task is to work on your proposal which is due February 1st. Use this time to talk with your TA. In particular, discuss the scope of your project and your chosen milestones.

Browser Developer Tools

Both Firefox and Chrome offer very good built-in tools for examining and debugging web applications.

  • To start the Firefox Web Developer toolbar, go to Tools->Web Developer->Developer Toolbar.
  • To start the Chrome Developer Tools, go to the wrench menu, then select Tools -> Developer tools.

Note that newer versions of these browsers tend to have better versions of these tools.

In this tutorial, use one or both of these toolbars to examine the following pages:

For each of these pages, look at:

  1. The page source
  2. HTML/CSS elements
  3. embedded JavaScript
  4. rendering errors

How did you learn about each?

You should find the following resources of use.

Firefox:

Chrome:

If you find other good ones please add to the above list or ask a TA to do so for you.