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)

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

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