WebFund 2013F: Tutorial 4

This lab is not yet finalized

In this lab you will be learning the basics of debugging Node-based web applications. All of the following assumes you have form-demo setup and running from Assignment 1.

Browser-based debugging

Firefox: Tools->Web Developer->Toggle Tools
Chrome/Chromium: Tools->Developer Tools

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

Node debugging

Node has a built-in debugger[1]. Start in 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, given the source

var x = 5;
var y = 10;

debugger;

You can run node debug app.js. This will start the debugger which will stop on the first line of the file (var x = 5;). If I 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

Brackets and Theseus

Tasks

Observe the request and response for the app's home page (http://localhost:3010). Look at both the network panel (load the page after selecting the network panel) and the HTML DOM view (Inspector/Elements)
Observe the contents of the form submit POST request: how much data is sent to the server? Observe it both from the browser side (to see what is sent) and inside of node, particularly where the POST results are returned.
Look at other web pages!