Difference between revisions of "WebFund 2014W: Tutorial 2"
| Line 1: | Line 1: | ||
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 16: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