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