WebFund 2014W: Tutorial 2: Difference between revisions

From Soma-notes
No edit summary
No edit summary
Line 1: Line 1:
For this tutorial first download and run [http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/T2/form-demo.zip form-demo].  Then, you should try to do two things:
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 [http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/T2/form-demo.zip 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 <tt>app.js</tt>, <tt>views/layout.jade</tt>, <tt>view/index.jade</tt>, and <tt>routes/index.js</tt>.
* 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 <tt>app.js</tt>, <tt>views/layout.jade</tt>, <tt>view/index.jade</tt>, and <tt>routes/index.js</tt>.
* Change the output page <tt>views/add.jade</tt> to use a bootstrap list with an embedded table, as described in the [http://getbootstrap.com/components/#list-group bootstrap reference].  In other words, make the output into a pretty table.  To do this you'll need to better understand the syntax of [http://jade-lang.com/reference/ Jade].
* Change the output page <tt>views/add.jade</tt> to use a bootstrap list with an embedded table, as described in the [http://getbootstrap.com/components/#list-group bootstrap reference].  In other words, make the output into a pretty table.  To do this you'll need to better understand the syntax of [http://jade-lang.com/reference/ 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 [http://nodejs.org/api/debugger.html built-in debugger].  Start it by running <tt>node debug app.js</tt>.  This will stop on the first line of the file.  Type <tt>n</tt> to step to the next line of the file. Type <tt>c</tt> to continue to the next breakpoint.  Breakpoints are set by adding a <tt>debugger;</tt> statement to the javascript source. 
At any time you can type <tt>repl</tt> 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 <tt>app.js</tt>.
<source line lang="javascript">
var x = 5;
var y = 10;
debugger;
</source>
You can run <tt>node debug app.js</tt> to start the debugger.
It which will stop on the first line of the file (<tt>var x = 5;</tt>). If you enter <tt>c</tt> node will continue executing until the <tt>debugger;</tt> statement where it will stop. From here if you enter <tt>repl</tt> you can execute Javascript in the current context. In the <tt>repl</tt> prompt if you enter <tt>x;</tt> it will return 5. If you enter <tt>x + y;</tt> it will return 15, etc.
More commands:
*<tt>s</tt> step in
*<tt>o</tt> step out
*list(x) show x number of lines around current line

Revision as of 20:51, 16 January 2014

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