WebFund 2015W: Tutorial 2

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 form-demo. To run you just need to type bin/www (from the form-demo directory); the modules are included.

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

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:

• Tables in HTML
• the node debugger
• debug output module (for DEBUG options)
• Firefox developer tools
• Chrome/Chromium developer tools

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 app.js, views/layout.jade, view/index.jade, and routes/index.js.
• 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 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 views/index.jade 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!

If you finish all this, start working on WebFund 2015W: Assignment 2.

Node debugger

Node has a built-in debugger. Start it by running node debug bin/www. This will stop on the first line of the file. Type n to step to the next line of the file. Type c to continue to the next breakpoint. Breakpoints are set by adding a debugger; statement to the javascript source.

At any time you can type repl 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 test.js.

var x = 5;
var y = 10;

debugger;

You can run node debug test.js to start the debugger.

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

More commands:

• s step in
• o step out
• list(x) show x number of lines around current line

Browser-based debugging

• Firefox developer tools: Tools->Web Developer->Toggle Tools
• 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).