WebFund 2015W: Tutorial 2 - Revision history

Soma: /* Tasks */

2015-01-19T18:18:29Z

Tasks

← Older revision		Revision as of 18:18, 19 January 2015
Line 22:		Line 22:

	* Figure out what happens when you delete six distinct lines from the application of your choosing. In other words, delete a line, restart the web app, see what happened. You should delete at least one line from <tt>app.js</tt>, <tt>views/layout.jade</tt>, <tt>view/index.jade</tt>, and <tt>routes/index.js</tt>.		* Figure out what happens when you delete six distinct lines from the application of your choosing. In other words, delete a line, restart the web app, see what happened. You should delete at least one line from <tt>app.js</tt>, <tt>views/layout.jade</tt>, <tt>view/index.jade</tt>, and <tt>routes/index.js</tt>.
	* Add a debug statement to routes/index.js that says "Rendering the main page" every time the initial page (with the form entry) is loaded. ~~Note the~~ debugging info should only be output when an appropriate DEBUG variable is set. '''NOTE:''' You will need to use the [https://github.com/visionmedia/debug debug module] for this (which is for debugging output), not the node debugger (which is for setting breakpoints and inspecting the current state of a node application).		* Add a debug statement to routes/index.js that says "Rendering the main page" every time the initial page (with the form entry) is loaded. The debugging info should only be output when an appropriate DEBUG variable is set. '''NOTE:''' You will need to use the [https://github.com/visionmedia/debug debug module] for this (which is for debugging output), not the node debugger (which is for setting breakpoints and inspecting the current state of a node application).
	* Change the output page <tt>views/index.jade</tt> to have a button saying "List People" that lists the people that have already been entered. Note that you should link to a page that is already in the code that does this!		* Change the output page <tt>views/index.jade</tt> to have a button saying "List People" that lists the people that have already been entered. Note that you should link to a page that is already in the code that does this!

Soma: /* Tasks */

2015-01-19T18:17:57Z

Tasks

← Older revision		Revision as of 18:17, 19 January 2015
Line 22:		Line 22:

	* Figure out what happens when you delete six distinct lines from the application of your choosing. In other words, delete a line, restart the web app, see what happened. You should delete at least one line from <tt>app.js</tt>, <tt>views/layout.jade</tt>, <tt>view/index.jade</tt>, and <tt>routes/index.js</tt>.		* Figure out what happens when you delete six distinct lines from the application of your choosing. In other words, delete a line, restart the web app, see what happened. You should delete at least one line from <tt>app.js</tt>, <tt>views/layout.jade</tt>, <tt>view/index.jade</tt>, and <tt>routes/index.js</tt>.
	* Add a debug statement to routes/index.js that says "Rendering the main page" every time the initial page (with the form entry) is loaded. Note the debugging info should only be output when an appropriate DEBUG variable is set.		* Add a debug statement to routes/index.js that says "Rendering the main page" every time the initial page (with the form entry) is loaded. Note the debugging info should only be output when an appropriate DEBUG variable is set. '''NOTE:''' You will need to use the [https://github.com/visionmedia/debug debug module] for this (which is for debugging output), not the node debugger (which is for setting breakpoints and inspecting the current state of a node application).
	* Change the output page <tt>views/index.jade</tt> to have a button saying "List People" that lists the people that have already been entered. Note that you should link to a page that is already in the code that does this!		* Change the output page <tt>views/index.jade</tt> to have a button saying "List People" that lists the people that have already been entered. Note that you should link to a page that is already in the code that does this!

Soma: /* References */

2015-01-19T12:57:21Z

References

← Older revision		Revision as of 12:57, 19 January 2015
Line 14:		Line 14:
	* [http://nodejs.org/api/debugger.html the node debugger]		* [http://nodejs.org/api/debugger.html the node debugger]
	* [https://github.com/visionmedia/debug debug output module] (for DEBUG options)		* [https://github.com/visionmedia/debug debug output module] (for DEBUG options)
			* [https://developer.mozilla.org/en-US/docs/Tools Firefox developer tools]
			* [https://developer.chrome.com/devtools/index Chrome/Chromium developer tools]

	==Tasks==		==Tasks==

Soma at 12:56, 19 January 2015

2015-01-19T12:56:06Z

← Older revision		Revision as of 12:56, 19 January 2015
Line 16:		Line 16:

	==Tasks==		==Tasks==

			You need to do all of the following to get full credit for this tutorial:

	* Figure out what happens when you delete six distinct lines from the application of your choosing. In other words, delete a line, restart the web app, see what happened. You should delete at least one line from <tt>app.js</tt>, <tt>views/layout.jade</tt>, <tt>view/index.jade</tt>, and <tt>routes/index.js</tt>.		* Figure out what happens when you delete six distinct lines from the application of your choosing. In other words, delete a line, restart the web app, see what happened. You should delete at least one line from <tt>app.js</tt>, <tt>views/layout.jade</tt>, <tt>view/index.jade</tt>, and <tt>routes/index.js</tt>.
			* Add a debug statement to routes/index.js that says "Rendering the main page" every time the initial page (with the form entry) is loaded. Note the debugging info should only be output when an appropriate DEBUG variable is set.
	* Change the output page <tt>views/index.jade</tt> to have a button saying "List People" that lists the people that have already been entered. Note that you should link to a page that is already in the code that does this!		* Change the output page <tt>views/index.jade</tt> to have a button saying "List People" that lists the people that have already been entered. Note that you should link to a page that is already in the code that does this!
	*


	~~==Browser-based debugging==~~
	* Firefox: Tools->Web Developer->Toggle Tools
	* Chrome/Chromium: Tools->Developer Tools

	~~Select the Network tab to see HTTP traffic.~~		If you finish all this, start working on [[WebFund 2015W: Assignment 2]].
	~~Select Inspector (Firefox) or Elements (Chrome/Chromium) to see the HTML document (DOM)~~.

	==Node debugger==		==Node debugger==
Line 50:		Line 46:
	*<tt>o</tt> step out		*<tt>o</tt> step out
	*list(x) show x number of lines around current line		*list(x) show x number of lines around current line

			==Browser-based debugging==

			* [https://developer.mozilla.org/en-US/docs/Tools Firefox developer tools]: Tools->Web Developer->Toggle Tools
			* [https://developer.chrome.com/devtools/index Chrome/Chromium developer tools]: Tools->Developer Tools
			The above links have full documentation on the respective developer tools.

			Select the Network tab to see HTTP traffic.
			Select Inspector (Firefox) or Elements (Chrome/Chromium) to see the HTML document (DOM).

Soma: Created page with "In this tutorial you will be learning the basics of debugging Node-based web applications in the context of a simple web form application. First download, unpack, and run [ht..."

2015-01-19T12:43:36Z

Created page with "In this tutorial you will be learning the basics of debugging Node-based web applications in the context of a simple web form application. First download, unpack, and run [ht..."

New page

In this tutorial you will be learning the basics of debugging Node-based web applications in the context of a simple web form application.

First download, unpack, and run [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/form-demo.zip form-demo]. To run you just need to type <tt>bin/www</tt> (from the form-demo directory); the modules are included.

To see all debugging output, type <tt>DEBUG='*' bin/www</tt>. This will produce more output that what you want; if you just want to see the ones pertaining to this application, run <tt>DEBUG='form-demo*' bin/www</tt>

Once you have the application up and running you should do the following tasks.

==References==

These pages may help you with some of the specifics of this document:

* [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table Tables in HTML]
* [http://nodejs.org/api/debugger.html the node debugger]
* [https://github.com/visionmedia/debug debug output module] (for DEBUG options)

==Tasks==

* Figure out what happens when you delete six distinct lines from the application of your choosing. In other words, delete a line, restart the web app, see what happened. You should delete at least one line from <tt>app.js</tt>, <tt>views/layout.jade</tt>, <tt>view/index.jade</tt>, and <tt>routes/index.js</tt>.
* Change the output page <tt>views/index.jade</tt> to have a button saying "List People" that lists the people that have already been entered. Note that you should link to a page that is already in the code that does this!
*

==Browser-based debugging==
* Firefox: Tools->Web Developer->Toggle Tools
* Chrome/Chromium: Tools->Developer Tools

Select the Network tab to see HTTP traffic.
Select Inspector (Firefox) or Elements (Chrome/Chromium) to see the HTML document (DOM).

==Node debugger==

Node has a [http://nodejs.org/api/debugger.html built-in debugger]. Start it by running <tt>node debug bin/www</tt>. This will stop on the first line of the file. Type <tt>n</tt> to step to the next line of the file. Type <tt>c</tt> to continue to the next breakpoint. Breakpoints are set by adding a <tt>debugger;</tt> statement to the javascript source.

At any time you can type <tt>repl</tt> into the debugger to drop into a read-eval-print loop where you can evaluate JavaScript statements in the current context. Ctrl-C will get you out of the REPL.

For example, consider this source for <tt>test.js</tt>.
<source line lang="javascript">
var x = 5;
var y = 10;

debugger;
</source>
You can run <tt>node debug test.js</tt> to start the debugger.

It which will stop on the first line of the file (<tt>var x = 5;</tt>). If you enter <tt>c</tt> node will continue executing until the <tt>debugger;</tt> statement where it will stop. From here if you enter <tt>repl</tt> you can execute Javascript in the current context. In the <tt>repl</tt> prompt if you enter <tt>x;</tt> it will return 5. If you enter <tt>x + y;</tt> it will return 15, etc.

More commands:
*<tt>s</tt> step in
*<tt>o</tt> step out
*list(x) show x number of lines around current line