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 and run form-demo. 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