WebFund 2013W: Web Develper Tools - Revision history

Soma: /* Tasks */

2013-01-25T17:40:13Z

Tasks

← Older revision		Revision as of 17:40, 25 January 2013
Line 21:		Line 21:
	* [http://maps.google.ca Google Maps]		* [http://maps.google.ca Google Maps]
	* [http://www.bing.com/maps Bing Maps]		* [http://www.bing.com/maps Bing Maps]
			* [http://sports.espn.go.com/espn/eticket/story?page=Dock-Ellis The Long, Strange Trip of Dock Ellis]

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

Soma at 17:10, 25 January 2013

2013-01-25T17:10:28Z

← Older revision		Revision as of 17:10, 25 January 2013
Line 11:		Line 11:

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

			===Tasks===

	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:
Line 28:		Line 30:
	How did you learn about each?		How did you learn about each?

	~~You should find the following resources of use.~~		===Resources===

	Firefox:		Firefox:

Soma: /* Browser Developer Tools */

2013-01-25T17:09:43Z

Browser Developer Tools

← Older revision		Revision as of 17:09, 25 January 2013
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:

Soma: /* Browser Developer Tools */

2013-01-25T17:08:12Z

Browser Developer Tools

← Older revision		Revision as of 17:08, 25 January 2013
Line 37:		Line 37:
	Chrome:		Chrome:
	* [https://developers.google.com/chrome-developer-tools/docs/overview tutorial and resources] from developers.google.com		* [https://developers.google.com/chrome-developer-tools/docs/overview tutorial and resources] from developers.google.com
	* [https://phpacademy.org/course/how-to-use-chrome-developer-tools-tutorial short video tutorials] from phpacademy		* [https://phpacademy.org/course/how-to-use-chrome-developer-tools-tutorial short video tutorials] from phpacademy.org

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

Soma: /* Browser Developer Tools */

2013-01-25T17:07:58Z

Browser Developer Tools

← Older revision		Revision as of 17:07, 25 January 2013
Line 37:		Line 37:
	Chrome:		Chrome:
	* [https://developers.google.com/chrome-developer-tools/docs/overview tutorial and resources] from developers.google.com		* [https://developers.google.com/chrome-developer-tools/docs/overview tutorial and resources] from developers.google.com
	* [https://phpacademy.org/course/how-to-use-chrome-developer-tools-tutorial video ~~tutorial~~] from phpacademy		* [https://phpacademy.org/course/how-to-use-chrome-developer-tools-tutorial short video tutorials] from phpacademy

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

Soma: Created page with "==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, di..."

2013-01-25T17:07:36Z

Created page with "==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, di..."

New page

==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:

* [http://homeostasis.scs.carleton.ca/~soma]
* [http://www.google.ca]
* [http://www.amazon.ca]
* [http://maps.google.ca]

For each of these pages, look at:
# The page source
# HTML/CSS elements
# embedded JavaScript
# rendering errors

How did you learn about each?

You should find the following resources of use.

Firefox:
* [http://www.howtogeek.com/105320/how-to-use-firefoxs-web-developer-tools/ How To Use Firefox’s Web Developer Tools] (out of date but still useful guide)
* [https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_view Firefox 3D view of pages]
* [https://hacks.mozilla.org/2012/08/new-firefox-command-line-helps-you-develop-faster/ Firefox Command Line]
* [http://www.infoq.com/presentations/Firefox-Developer-Tools Talk from October 2012 on Firefox Developer Tools] by Joe Walker

Chrome:
* [https://developers.google.com/chrome-developer-tools/docs/overview tutorial and resources] from developers.google.com
* [https://phpacademy.org/course/how-to-use-chrome-developer-tools-tutorial video tutorial] from phpacademy

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