WebFund 2014W: 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 node app.js; the modules are included.

Then, you should try to do the following tasks.

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/add.jade to use a bootstrap list with an embedded table, as described in the bootstrap reference. In other words, make the output into a pretty table. To do this you'll need to better understand the syntax of Jade.

To understand what is breaking in Node you'll want some debugging/development tools. Here are some.

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 app.js. 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 app.js.

var x = 5;
var y = 10;

debugger;

You can run node debug app.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